在 angular2 中的延迟加载模块之间共享一个外部模块答案

【问题标题】：Share an external module between lazy loaded modules in angular2在 angular2 中的延迟加载模块之间共享一个外部模块
【发布时间】：2017-01-24 11:35:00
【问题描述】：

我的应用具有使用重量级外部包（ag-grid，大约 1MB）的组件，该包以 angular2 模块 (AgGridModule) 的形式提供。我只想在需要使用它的组件时才加载这个包，所以我的ContentModule 及其所有子模块都是延迟加载的。整个结构是这样的：

但是，当我将AgGridModule 导入Submodule1 和Submodule3 时，它最终被包含在编译的JS 中两次，使得1.chunk.js 和3.chunk.js 都变大了。我尝试将其导入ContentModule，但随后子模块无法识别AgGridModule 中包含的组件，即使我将它们列在exports 的exports 属性中。

@NgModule({
  imports: [
    ContentRoutingModule,
    SomeOtherModule,
    AgGridModule.withComponents([])
  ],
  exports: [
    // this is the component from AgGridModule that I use
    AgGridNg2
  ]
})
export class ContentModule { }

有没有办法在延迟加载的模块之间共享一个模块，或者将导入模块的某些组件公开给延迟加载的子模块？

UPD：创建一个共享模块并将其导入子模块没有帮助，仍然有两个大约 1MB 的块：

UPD2：我通过将 Submodule1 和 Submodule3 合并到一个模块中暂时解决了这个问题。

【问题讨论】：

您应该将整个AgGridModule 添加到exports 数组中。您只能在 ContentModule 或整个其他模块中导出声明
@PierreDuc 不，导出整个AgGridModule 并没有解决，组件仍然无法识别。
您目前如何生成构建？角-cli？
@AngularFrance 是的，1.0.0-beta.26。
您是否尝试在imports 的ContentModule 数组中写入AgGridModule？因为我正在实施相同的场景并为我工作。附言我还没有为子组件创建模块文件。

标签： angular typescript lazy-loading angular2-modules ng-modules

【解决方案1】：

你需要创建一个SharedAgGridModule:

@NgModule({
  imports: [
    AgGridModule.withComponents([])
  ],
  exports: [
    ContentModule,
    AgGridModule
  ]
})
export class SharedAgGridModule{}

那么你应该只为使用 AgGrid 的子模块导入这个模块。不需要在这些子模块中也导入ContentModule，因为它是在这个模块中导出的

【讨论】：

不幸的是，与 Santanu 的回答相同 :( 我并没有将 ContentModule 导入子模块。

【解决方案2】：

您可以在import 的位置使用SharedModule 以及export AgGridModule。你必须export 完整的模块AgGridModule 而不仅仅是你使用的组件。

然后您可以在您的Submodule1 和Submodule3 中简单地import 和SharedModule。

【讨论】：

不幸的是，这会导致相同的结果。所有使用 SharedModule 的模块都会生成包含整个 ag-grid 的块。
表示AgGridModule里面有服务，需要添加到AppModule中。
但是我没有使用 AgGridModule 的任何服务。我只使用它的一个组件。
您可能没有直接使用这些服务。组件可能会使用它们。
查了一下：该模块没有公开任何服务。

【解决方案3】：

我们面临同样的问题。

2 个解决方案

放入 ShareModule 导入和导出。子模块导入共享模块。基本上，ShareModule 没有延迟加载。
合并到同一个路径/模块一起懒加载。

【讨论】：