共享角度材料模块在整个工程中的应用

Question

我在我的app.module中导入了所有的角材料模块

@NgModule({imports: [
CdkTableModule,
MatAutocompleteModule,
MatButtonModule,
MatCardModule,
MatCheckboxModule,
MatIconModule,
MatInputModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule],})
export class AppModule {}

现在我的程序将重定向到登录页面或布局页面。守则如下所示：

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {AuthGuard} from './shared/guard/auth.guard';

const routes: Routes = [
   {path: '', loadChildren: './layout/layout.module#LayoutModule', canActivate: [AuthGuard]},
   {path: 'login', loadChildren: './login/login.module#LoginModule'}];

@NgModule({
   imports: [RouterModule.forRoot(routes, {useHash: true})],
   exports: [RouterModule]
})
export class AppRoutingModule {}

我怎么才能用所有的角度材料从这里代替进口所有的材料再次在Login.module和Layout.module

我是用compoent做的：LoginComponent和我工作，但是我如何在loadChildren中做到这一点呢？

Answer 1

角NgModule-s声明仅适用于当前组件。意味着如果您在MaterialModule中导入了AppModule，那么只有在AppModule声明中添加的组件才能使用来自MaterialModule的元素。您可以创建一个自定义MaterialModule，将所有声明导入其中并从该模块导出它们。然后，在项目中，您可以在您想要使用的每个模块中使用这个自定义模块。

如何处理包的大小，树的抖动只会丢弃那些不被该模块使用的声明。

NgModule({
   imports: [...here goes material modules],
   exports: [...here goes material modules]
})
export class CustomMaterialModule

...

NgModule({
   imports: [CustomMaterialModule]
})
export class YourModule {  }

Answer 2

创建导入模块的数组

const matModules = [CdkTableModule,MatAutocompleteModule,MatButtonModule]; //etc.

在imports和exports中的装饰器中使用它，并创建一个新模块

@NgModule({
  imports: [...matModules],
  exports: [...matModules]
})
export class MaterialConfigurationModule {}

现在您可以简单地将此模块导入到其他模块中。

@NgModule({
  imports: [MaterialConfigurationModule],
})
export class AppModule {}