在延迟加载的模块中将页面组件与功能组件分开

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 {
}