Angular 6-在运行时通过AOT编译动态创建模块

时间:2018-10-23 13:20:26

标签: angular

我正在尝试动态加载create模块并将其添加到通过loadChildren的路由。之所以采用这种方法,主要是因为应该从json文件中加载路由配置。

所以我有canActivate卫士负责创建模块

loadFeatureModule(loadChildren: string): Observable<Type<any>> {

  this.getRoutes(loadChildren).pipe(
    switchMap(({ routes }) => {
      const featureModule = NgModule({
        imports: [
          RouterModule.forChild(routes)
        ]
      })(class { });
      return this.compiler.compileModuleAsync(featureModule);
    }),
    map(m => m.moduleType)
  );
}

并将功能模块添加到路线:

addFeatureModule = (loadChildren: string, path: string): Partial<Route> => {
  return {
    path: path,
    loadChildren: this.loadFeatureModule(loadChildren)
  };
}

最后,我用新路由重置了路由器配置。这在JIT编译器上可以正常工作,但不会在AOT编译器上加载任何路由。

我还尝试通过引入这些新的提供程序将JitComplier注入到应用程序中:

providers: [
  { provide: COMPILER_OPTIONS, useValue: {}, multi: true },
  { provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS] },
  { provide: Compiler, useFactory: createCompiler, deps: [CompilerFactory] }
]

export function createCompiler(compilerFactory: CompilerFactory) {
  return compilerFactory.createCompiler();
}

更新

请使用此repo重现问题

问题

进一步调查后,我发现了两个问题:

  1. AOTbuildOptimizer删除了编译动态模块所需的像NgModuleComponent这样的角度修饰符。显然buildOptimizer没有解决方案,我发现AOT有点讨厌hack,但是对此有更好的解决方案吗?

  2. 动态创建模块时,无法加载在动态模块中直接/间接声明的任何组件的templateUrl。在我的示例中,这意味着我无法将LayoutModule导入动态模块,因为它声明了使用templateUrl的组件。这是由于编译时提供了ResourceLoader使用AOT的应用程序。

0 个答案:

没有答案