angular - 仅包含服务的角度延迟加载模块？

Question

我正在寻找一种方法来延迟加载不包含任何组件但仅包含服务的模块。背景：在我的应用程序中是使用exceljs库的 Excel 导出服务。这个库非常大，我试图防止该库成为vendor.jsor的一部分main.js。它通过import * as Excel from 'exceljs/dist/exceljs.min.js'服务“包含”。

现在，我在使用“Excel 导出”服务的单独模块中有几个组件（无组件）。我更喜欢仅在用户“单击导出按钮”而不是之前加载服务的方法。

如何做到这一点？

Answer 1

这将是一种方法：

excel.module.ts

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ],
  providers: [ExcelService]
})
export class ExcelModule {
  static loaded = false;
}

app.component.ts

export class AppComponent {
  constructor (
    private compiler: Compiler,
    private injector: Injector
  ) { }
  
  load () {
    import('./excel/excel.module')
      .then(m => m.ExcelModule)
      .then(m => {
        console.dir(m.loaded)
        
        return m;
      })
      .then(m => this.compiler.compileModuleAsync(m).then(r => (m.loaded = true,r)))
      .then(factory => {
        const module = factory.create(this.injector);
        
        console.dir(module.injector.get(ExcelService))
      })
  }
}

第一次加载，m.loaded将false. 在随后的时间里，它将是true。有了这个，我们可以确定我们不会多次加载模块。

当然，更简单（并且可能更好）的方法是使用专门的服务来加载模块，例如ModuleLoaderService，您将有一个Map对象跟踪加载的模块。

ng-运行演示。