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

Question

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

但是，当我将 AgGridModule 导入到 Submodule1 和 Submodule3 时，它最终被包含在编译的 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:创建一个共享模块并将其导入子模块没有帮助，仍然有两个 block ，每个 block 大约 1MB:

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

Answer 1

您需要创建一个SharedAgGridModule:

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

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