在Angular 5和AOT-Build中使用@angular编译器时出错

Question

我正在使用Angular Compiler在运行时编译组件.此代码工作正常,但如果我想使用AOT-Prerendering,则组件不起作用,因为Angular不会在AOT-Build中加载编译器.

我已经阅读了一些不再适用于Angular5 +的变通方法.你对这个问题有什么解决方案吗？

最好的祝福

    export class RuntimeCompilerComponent {
      template: string = "";
      @ViewChild('dynamicComponent', { read: ViewContainerRef }) container: ViewContainerRef;
      constructor(private compiler: Compiler) { }

      //Ruft die addComponent Methode auf
      createComponent() {
        this.addComponent(this.template, null);
      }

      // Komponente wird dynamisch erzeugt und geladen
      // Sollten sich die properties ändern muss ggf. die Changedetection manuell aufgerufen werden.
      private addComponent(template: string, properties: any = {}) {
        @Component({ template })
        class TemplateComponent { }
        @NgModule({
          imports: [
            AppModule,
            CommonModule,
            ReactiveFormsModule,
            FormsModule,
            BrowserModule,
          ], declarations: [TemplateComponent]
        })
        class TemplateModule { }
        const mod = this.compiler.compileModuleAndAllComponentsSync(TemplateModule);
        const factory = mod.componentFactories.find((comp) =>
          comp.componentType === TemplateComponent
        );
        const component = this.container.createComponent(factory);
        Object.assign(component.instance, properties);
      }
    }

Answer 1

您可以通过一些技巧来完成这项工作。去年我遇到了同样的问题，并找到了解决办法。我在风格指南中使用动态生成的角度组件。这是一个工作示例，适用于 Angular 7 中的 AOT 编译：

https://github.com/johncrim/angular-dynamic-styleguide

该项目的 README.md 提供了一些关于我遇到的问题以及我如何找到解决方案的附加信息。