Angular Ivy: чтение поставщиков модулей

У Ivy есть частная функция под названием createInjector, она доступна с помощью тета в текущем API, но будет доступна позже, когда Ivy станет стабильной.

Предположим, у вас есть такой код:

@NgModule({
  declarations: [LazyComponent],
  providers: [
    {
      provide: 'components',
      useValue: {
        lazy: LazyComponent
      }
    }
  ],
  entryComponents: [LazyComponent]
})
export class LazyModule {
  static getLazyComponents: () => { lazy: typeof LazyComponent };

  constructor(injector: Injector) {
    LazyModule.getLazyComponents = () => injector.get('components');
  }
}

Давайте лениво загрузим LazyModule через динамический импорт:

import { ɵcreateInjector as createInjector, Injector } from '@angular/core';

export class AppComponent {
  constructor(injector: Injector) {
    import('./lazy/lazy.module').then(({ LazyModule }) => {
      createInjector(LazyModule, injector);
      console.info(LazyModule.getLazyComponents());
    });
  }
}

Но при таком подходе вы лениво загружаете модуль. Если вы хотите лениво загрузить компонент - вы можете сделать это без использования модуля, предположим, что это LazyComponent, который находится внутри lazy.component.ts файла:

@Component({
  selector: 'app-lazy',
  template: `
    <h1>I am lazy</h1>
  `
})
export class LazyComponent {}

Вы можете использовать динамический импорт для загрузки этого компонента + функция renderComponent:

import { ɵrenderComponent as renderComponent, Injector } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <app-lazy></app-lazy>
  `
})
export class AppComponent {
  constructor(injector: Injector) {
    import('./lazy.component').then(({ LazyComponent }) => {
      renderComponent(LazyComponent, {
        injector,
        host: 'app-lazy'
      });
    });
  }
}

Одно замечание: у ленивых компонентов НЕТ жизненного цикла! constructor будет вызываться, но не такие хуки, как ngOnInit, ngOnDestroy и т.д.

Возвращаясь к вашему вопросу о ленивом модуле - вы, вероятно, захотите открыть фабрики компонентов этих ленивых компонентов, что-то вроде этого:

export class LazyModule {
  static getComponentFactories: () => {
    lazy: ComponentFactory<LazyComponent>;
  };

  constructor(resolver: ComponentFactoryResolver) {
    LazyModule.getComponentFactories = () => ({
      lazy: resolver.resolveComponentFactory(LazyComponent)
    });
  }
}

Если вы не хотите использовать статические функции, вы можете объявить методы экземпляра:

export class LazyModule {
  constructor(private resolver: ComponentFactoryResolver) {}

  public getComponentFactories() {
    return {
      lazy: this.resolver.resolveComponentFactory(LazyComponent)
    };
  }
}

А затем получить экземпляр этого модуля:

export class AppComponent {
  constructor(private injector: Injector) {
    import('./lazy/lazy.module').then(({ LazyModule }) => {
      const injector = createInjector(LazyModule, this.injector);
      const lazyModule = injector.get(LazyModule);
      console.info(lazyModule.getComponentFactories());
    });
  }
}