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

Posted 2023-02-19

【中文标题】在 Angular 5 和 AOT-Build 中使用 @angular 编译器时出错

【英文标题】：Error while using @angular compiler in Angular 5 and AOT-Build

【发布时间】：2018-06-28 14:24:43

【问题描述】：

我正在使用 Angular 编译器在运行时编译组件。此代码工作正常，但如果我想使用 AOT-Prerendering 组件将无法工作，因为 Angular 不会在 AOT-Build 中加载编译器。

我已经阅读了一些不再适用于 Angular5+ 的解决方法。 你有解决这个问题的办法吗？

最好的问候

导出类 RuntimeCompilerComponent 模板：字符串=“”； @ViewChild('dynamicComponent', read: ViewContainerRef ) 容器：ViewContainerRef; 构造函数（私有编译器：编译器） //Ruft die addComponent Methode auf 创建组件（） this.addComponent(this.template, null); // Komponente wird dynamisch erzeugt und geladen // Sollten sich die properties ändern muss ggf. die Changedetection manuell aufgerufen werden。 私人添加组件（模板：字符串，属性：任何= ） @组件（模板） 类模板组件 @NgModule( 进口：[ 应用模块， 通用模块， 反应形式模块， 表单模块， 浏览器模块， ]，声明：[模板组件] ) 类模板模块 const mod = this.compiler.compileModuleAndAllComponentsSync(TemplateModule); 常量工厂 = mod.componentFactories.find((comp) => comp.componentType === TemplateComponent ); 常量组件 = this.container.createComponent(factory); Object.assign(component.instance, properties);

【参考方案1】：

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

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

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