从角度 8 的模块中获取注入器

Question

问题：

我正在为 Angular 中的非路由模块设置延迟加载。在第 7 版中，我使用 NgModuleFactoryLoader 和它的函数 load 来延迟加载模块并获取模块的第一个入口点（以防万一）

this.loader.load('path-to-module')
  .then(factory => {
    const module = factory.create(this._injector);
    return module.injector.get(EntryService);
  });

但在 Angular 8 中 NgModuleFactoryLoader 已弃用，因此我必须以这种方式加载模块：

import('path-to-module')
  .then(m => m.MyModule)
  .then(myModule => {
    ...
});

这里的问题是我无法在新的延迟加载中检索工厂并在此处获取提供程序（IVY 的想法之一 - 没有工厂）。

我已经尝试过的：

第一个解决方案（仅适用于不适合我们的 JIT 编译器，因为我使用 AOT 编译器进行生产）

import('path-to-module')
  .then(m => m.MyModule)
  .then(myModule => {
    return this._compiler.compileModuleAsync(myModule)
      .then(factory => {
        const module = factory.create(this._injector);
        return module.injector.get(EntryService);
      });
});

第二个解决方案（脏且未完全检查。它使用ngInjectorDef，这是 IVY 的新功能，还没有任何描述的 API）：

import('path-to-module')
  .then(m => m.MyModule)
  .then(myModule => {
    const providers = myModule['ngInjectorDef'].providers; // Array<Providers>
    ... find EntryService in providers
});

ngInjectorDef - 是 Angular 添加的静态模块类属性，具有工厂、提供者和导入属性。

来源：

• https://netbasal.com/the-need-for-speed-lazy-load-non-routable-modules-in-angular-30c8f1c33093（延迟加载不可路由的模块直到角度 8）
• https://herringtondarkholme.github.io/2018/02/19/angular-ivy/（IVY 预览 - 见No NgFactory file anymore部分）
• https://blog.angularindepth.com/automatically-upgrade-lazy-loaded-angular-modules-for-ivy-e760872e6084（描述了 Angular

Answer 1

我不会说访问ngInjectorDef 属性是“肮脏的黑客”。是的，它没有在任何地方记录，因为正如 Igor Minar 所说，Ivy 是 Angular 8 中的可选预览版。但是在 Viktor Savkin 的一些文章中已经提到了很多私有函数，例如 directiveInject。

您不应在 providers 属性中搜索您的服务。假设有 20 多个提供者，并且 EntryService 名称将在生产中缩小为 t 或 k 之类的名称。

如果您使用 Ivy - 有一个名为 createInjector 的私有函数，它接受模块构造函数作为参数。

@Injectable()
export class EntryService {
  public logFromEntryService(): void {
    console.log('Logging from EntryService...');
  }
}

@NgModule({
  providers: [EntryService]
})
export class EntryModule {
  public static getEntryService: () => EntryService = null;

  constructor(injector: Injector) {
    EntryModule.getEntryService = () => injector.get(EntryService);
  }
}

假设你有这样的代码，让我们使用动态导入来加载这个EntryModule：

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

export class AppComponent {
  constructor(private injector: Injector) {
    this.loadEntryModule();
  }

  private async loadEntryModule(): Promise<void> {
    const { EntryModule } = await import('./entry.module');
    createInjector(EntryModule, this.injector);
    EntryModule.getEntryService().logFromEntryService();
  }
}

createInjector 用于实例化 EntryModule，在实例化之后 - getEntryService 静态方法不等于 null。

我们还可以公开injector 属性，例如：

public static injector: Injector = null;

constructor(injector: Injector) {
  EntryModule.injector = injector;
}

这可能被视为服务定位器，这是一种反模式。但取决于你！