Angular модуль отложенной загрузки, который содержит только службы?

Question

Я ищу способ ленивой загрузки модуля, который не содержит никаких компонентов, а только службы. Предыстория: в моем приложении есть служба экспорта Excel, использующаяexceljsбиблиотека. Эта библиотека очень большая, и я пытаюсь не допустить, чтобы библиотека стала частью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 объект отслеживает загруженные модули.

ng-run demo.