从延迟加载的模块中的要素组件中分离页面组件

Question

使用大型单模块Angular 5应用程序我试图将其划分为多个模块以提高可维护性和性能（延迟加载）。

我做了什么

我已经创建了多个专门用于延迟加载的模块。它们包含

1. 导航到路线时应呈现的主要组件（页面）
2. 子路线的所有组件（页面）
3. 上述组件中使用的所有要素组件（不可路由）。

看到我需要在多个模块中使用一些功能组件，我正在考虑

1. 继续使用我当前的结构并导出仅功能组件

2. 将要素组件提取到单独的共享模块

我的问题

性能方面，当（延迟加载的）模块需要从另一个模块导入要素组件时，它会对我选择的上述哪个选项产生影响吗？

Answer 1

我特别喜欢功能2，你将功能组件提取到一个单独的共享模块中，以使用Angular Material为例，你可以拥有所有的页面，包括延迟加载和非延迟加载使用约5或6个模块反复进行，将这些模块分别连续导入到延迟加载的组件模块中会浪费时间和资源，而是将组件（功能模块）放入共享模块中更加有条理。在每个延迟加载的模块中重用。

我用一个简单的模块实现了这个： -

@NgModule({
  imports: [
    ANGULAR_MODULES,
    MATERIAL_MODULES,
    COVALENT_MODULES,
    OTHER_MODULES
  ],
  declarations: [],
  exports: [
    ANGULAR_MODULES,
    MATERIAL_MODULES,
    COVALENT_MODULES,
    OTHER_MODULES
  ]
})
export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [SERVICES]
    };
  }
}

该模块包括所有重用的模块和服务。然后使用它们，我只需将它们添加到我的延迟加载模块中： -

@NgModule({
  imports: [
    CommonModule,
    UsersRoutingModule,
    SharedModule
  ],
  declarations: [UsersComponent]
})
export class UsersModule {
}