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

Question

我的应用程序的组件使用重量级外部包(ag-grid,大约1MB),作为angular2模块(AgGridModule)提供.我想只在需要使用它的组件时加载包,所以我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:创建共享模块并将其导入子模块没有帮助,仍然有两个块,每个块大约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你的Submodule1and中Submodule3。