在 Angular 5 和 AOT-Build 中使用 @angular 编译器时出错 [英] Error while using @angular compiler in Angular 5 and AOT-Build
问题描述
我正在使用 Angular Compiler 在运行时编译组件.此代码工作正常,但如果我想使用 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.私人添加组件(模板:字符串,属性:任何= {}){@Component({模板})类模板组件 { }@NgModule({进口:[应用模块,通用模块,反应形式模块,表单模块,浏览器模块,]、声明:[TemplateComponent]})类模板模块 { }const mod = this.compiler.compileModuleAndAllComponentsSync(TemplateModule);const factory = mod.componentFactories.find((comp) =>comp.componentType === TemplateComponent);const 组件 = this.container.createComponent(factory);Object.assign(component.instance, properties);}}您可以通过一些技巧来完成这项工作.去年我遇到了同样的问题,并且能够找到解决方法.我在我的样式指南中使用了动态生成的角度组件.这是一个工作示例,它适用于 Angular 7 中的 AOT 编译:
https://github.com/johncrim/angular-dynamic-styleguide
该项目的 README.md 提供了一些关于我遇到的问题以及我如何找到修复的附加信息.
i am using the Angular Compiler to compile components in runtime. This Code works fine, but if I want to use AOT-Prerendering the Component wont work, because Angular does not load the Compiler in AOT-Build.
I've read about some Workarounds that wont Work in Angular5+ anymore. Do you have any solutions for this problem?
Best Regards
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); } }
You can make this work with a few tricks. I ran into the same problem last year, and was able to find a fix. I was using dynamically generated angular components in my style-guide. Here's a working example, which works with AOT compilation in Angular 7:
https://github.com/johncrim/angular-dynamic-styleguide
The README.md for that project provides some additional info on the problems I came up against and how I figured out the fixes.
这篇关于在 Angular 5 和 AOT-Build 中使用 @angular 编译器时出错的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!