在 App 和每个 Module angular 2 中导入 sharedModule答案

【问题标题】：Importing sharedModule in App and in every Module angular 2在 App 和每个 Module angular 2 中导入 sharedModule
【发布时间】：2018-04-26 21:33:18
【问题描述】：

我对如何在 Angular 2 中使用共享模块导入有点困惑，并希望得到一些澄清。

因此，当我创建一个包含导入组件和模块的 SharedModule 类时，我也将其导出以供重用。我将 SharedModule 导入到我的 app.module 中，因此： 1. 它会在应用加载时出现。 2.所以我不必在其他功能模块中导入它。

我注意到，即使我在 app.module 中导入，但是当我运行我的应用程序时，我会收到错误消息，指出我缺少组件或对模块的引用。所以我最终在我的所有功能模块中导入了共享模块。我想通过将它放在 app.module 中，我不必将它导入到我的其他模块中？

【问题讨论】：

标签： angular

【解决方案1】：

我认为通过将它放在 app.module 中，我不必将它导入到我的其他模块中？

不，导入到AppModule 的任何模块都不能用于同样由AppModule 导入的任何其他模块。如果您想让SharedModule's 导出的管道/组件/指令可用于功能模块，则必须将SharedModule 显式导入该功能模块。这样做的好处是您将所有导出的组件都放在 ONE 模块中，因此即使您必须将 SharedModule 导入 10 个功能模块，您也只需导入 1 个，如反对在这 10 个功能模块的每一个中单独导入每个组件/指令/管道等。

如需进一步参考，请查看official docs。

【讨论】：

【解决方案2】：

如果共享组件有组件、管道和指令，则需要将共享模块导入到每个需要它的功能模块中。作为上述一点的例外，您必须在以下情况下在您的 App 模块中导入共享模块：

使用了延迟加载，并且在不同的功能模块之间共享服务，并且需要在功能模块之间创建和共享服务的单个实例。

import { ModuleWithProviders } from '@angular/core';
import { SampleService } from './services/sample';

@NgModule({
  declarations: [],
  imports: [],
  exports: []
})

export class SharedComponentsModule {
  static forRoot(): ModuleWithProviders {
    return {
        ngModule: SharedComponentsModule,
        providers: [SampleService]
    };
}}
//Import the module with Provider in AppModule :
Imports: [
SharedComponentsModule.forRoot()
]

【讨论】：