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

Question

我的应用程序的组件使用重量级的外部包（ag-grid，大约 1MB），它作为 angular2 模块（AgGridModule）提供。我只想在需要使用它的组件时才加载这个包，所以我的ContentModule和它的所有子模块都是延迟加载的。整个结构如下所示：

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

@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 合并到一个模块中暂时解决了这个问题。

Answer 1

您需要创建一个SharedAgGridModule：

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

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

Answer 2

您可以使用SharedModulewhere youimport以及export. AgGridModule您必须export完整的模块AgGridModule，而不仅仅是您使用的组件。

然后你可以简单地import在SharedModule你的Submodule1andSubmodule3中。

Answer 3

我们面临同样的问题。

2 解决方案

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