Question

我正在寻找一种延迟加载模块的方法，该模块不包含任何组件，而仅包含服务。背景：我的应用程序中是一个使用exceljs库的Excel导出服务。该库非常大，我试图防止该库成为vendor.js或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对象来跟踪加载的模块。 / p>

ng-run demo。

角延迟加载模块仅包含服务？

1 个答案:

excel.module.ts

app.component.ts