在我的Angular 5项目中,我需要在下载API数据后动态创建一个组件(我的HTML代码里面有Angular标记 - 我需要在请求完成后编译它们),但我看到AOT存在问题 .

我试过使用该主题的解决方案Angular 4 | Template bind through innerHTML, component variables are not accessible (damContentRoot is this case)(并从那个How can I use/create dynamic template to compile dynamic Component with Angular 2.0?

这是我目前的代码:

import {
    Directive,
    OnChanges,
    Input,
    ComponentRef,
    ViewContainerRef,
    Compiler,
    ModuleWithComponentFactories,
    Component,
    NgModule,
    Type
} from '@angular/core';

import {CommonModule} from '@angular/common';
import { FormsModule, ReactiveFormsModule, NgForm }   from '@angular/forms';
import {JitCompilerFactory} from '@angular/platform-browser-dynamic';





@Directive({selector: '[compile]'})
export class CompileDirective implements OnChanges {
    @Input()compile : string;
    @Input()compileContext : any;

    compRef : ComponentRef < any >;

    constructor(private vcRef : ViewContainerRef, private compiler : Compiler) {}

    ngOnChanges() {
        if (!this.compile) {
            if (this.compRef) {
                this.updateProperties();
                return;
            }
            throw Error('You forgot to provide template');
        }

        this
            .vcRef
            .clear();
        this.compRef = null;

        const component = this.createDynamicComponent(this.compile);
        const module = this.createDynamicModule(component);
        this
            .compiler
            .compileModuleAndAllComponentsAsync(module)
            .then((moduleWithFactories : ModuleWithComponentFactories < any >) => {
                let compFactory = moduleWithFactories
                    .componentFactories
                    .find(x => x.componentType === component);

                this.compRef = this
                    .vcRef
                    .createComponent(compFactory);
                this.updateProperties();
            })
            .catch(error => {
                console.log(error);
            });
    }

    updateProperties() {
        for (var prop in this.compileContext) {
            this.compRef.instance[prop] = this.compileContext[prop];
        }
    }

    private createDynamicComponent(template : string) {
        @Component({selector: 'custom-dynamic-component', template: template})
        class CustomDynamicComponent {}
        return CustomDynamicComponent;
    }

    private createDynamicModule(component : Type < any >) {
        @NgModule({
            // You might need other modules, providers, etc... Note that whatever components
            // you want to be able to render dynamically must be known to this module
            imports: [CommonModule, FormsModule, ReactiveFormsModule],
            declarations: [component],
        })
        class DynamicModule {}
        return DynamicModule;
    }
}

<ng-container *compile="this.pageData.html; context: this"></ng-container>

但是我收到了错误: ERROR Error: Runtime compiler is not loaded

我_643483_得到错误:https://github.com/angular/angular/issues/20639 .

有没有办法在运行时通过编译添加组件?或者将它与JIT结合在一起并没有任何意义?

我已经阅读了关于动态组件加载的整个主题(https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e),我仍然无法找到解决方案,总是 JitCompilerFactory 错误 .