Ошибка при использовании компилятора @angular в Angular 5 и AOT-Build

Я использую компилятор Angular для компиляции компонентов во время выполнения. Этот код работает нормально, но если я хочу использовать предварительную визуализацию AOT, компонент работать не будет, потому что 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);
      }
    }

person dindunuffin    schedule 19.01.2018    source источник


Ответы (1)


Вы можете заставить это работать с помощью нескольких уловок. Я столкнулся с той же проблемой в прошлом году и смог найти решение. В моем руководстве по стилю я использовал динамически генерируемые компоненты angular. Вот рабочий пример, который работает с компиляцией AOT в Angular 7:

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

README.md для этого проекта предоставляет дополнительную информацию о проблемах, с которыми я столкнулся, и о том, как я нашел исправления.

person crimbo    schedule 22.03.2019