如何创建AOT兼容的“动态”模块？ （在静态解析符号值时遇到错误。不支持函数调用。）

Question

我正在构建一个包含许多路由的应用程序，每个路由都定义为NgModule。每个模块都非常相似，所以我想将它抽象为一个可重用的函数，它接受一组组件，并构建一个顶级@Component和@NgModule。

所以这是其中一个模块：

import { makeModule } from './module-factory';
import { Component } from '@angular/core';

@Component({
  selector: 'app-component-1',
  template: `<p>First Component</p>`
})
export class FirstComponent {}

@Component({
  selector: 'app-component-2',
  template: `<p>Second Component</p>`
})
export class SecondComponent {}

export const FooModule = makeModule('foo', [FirstComponent, SecondComponent]);

这是我正在尝试构建的makeModule()函数：

import { NgModule, Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Route, RouterModule } from '@angular/router';

export const makeEntryComponent = (components: any[]) => {
  @Component({
    template: `<p>Entry Component</p>
      <ng-container *ngFor="let component of components">
        <ng-container *ngComponentOutlet="component"></ng-container>
      </ng-container>
    `
  })
  class EntryComponent {
    components = components;
  }
  return EntryComponent;
};
export const makeModule = (componentName: string, components: any[]): any => {
  const EntryComponent = makeEntryComponent(components);
  const routes: Route[] = [{ path: componentName, component: EntryComponent }];
  const declarations = [EntryComponent, ...components];

  @NgModule({
    imports: [CommonModule, RouterModule.forChild(routes)],
    declarations,
    entryComponents: components,
    exports: [EntryComponent]
  })
  class Module {}
  return Module;
};

所以使用JIT编译器可以正常工作，但是一旦我运行ng serve --aot，它就会失败：

  

错误中的错误：静态解析符号值时出错。不支持函数调用。考虑使用对导出函数的引用替换函数或lambda（原始.ts文件中的位置18:27），在C：/ Users / IGEN261 / code / github / ng-dynamic / src / app / module中解析符号makeModule -factory.ts，在C：/Users/IGEN261/code/github/ng-dynamic/src/app/foo.module.ts中解析符号FooModule，在C：/ Users / IGEN261 / code / github / ng中解析符号FooModule -dynamic / src / app / foo.module.ts，在C：/Users/IGEN261/code/github/ng-dynamic/src/app/app.module.ts中解析符号AppModule，在C：/ Users中解析符号AppModule /IGEN261/code/github/ng-dynamic/src/app/app.module.ts

我觉得必须有办法使这与AOT保持一致，但我不确定如何。我应该以不同的方式构建我的代码吗？或者我是否必须在此代码库中放弃DRY的任何前景以使其与AOT兼容？

仅供参考 - 完整项目可在GitHub上找到：https://github.com/mattdsteele/ng-dynamic-aot