Compiler.compileModuleAndAllComponentsSync在Angular 10中“未加载运行时编译器”

问题描述

我设计了一个动态表格。它在Angular 5版本中运行良好。但是，将Angular版本升级到10后，它开始出现故障。

compiler.compileModuleAndAllComponentsSync 行返回的错误消息：

"Error: Runtime compiler is not loaded
    at Compiler._throwError (http://localhost:8001/vendor.js:39209:11)
    at SectorFormComponent.createComponent (http://localhost:8001/main.js:122993:33)
    at SectorFormComponent.compileTemplate (http://localhost:8001/main.js:122845:30)
    at SectorFormComponent.ngOnInit (http://localhost:8001/main.js:122838:14)
    at checkAndUpdateDirectiveInline (http://localhost:8001/vendor.js:33918:19)
    at checkAndUpdateNodeInline (http://localhost:8001/vendor.js:42831:20)
    at checkAndUpdateNode (http://localhost:8001/vendor.js:42793:16)
    at debugCheckAndUpdateNode (http://localhost:8001/vendor.js:43420:21)
    at debugCheckDirectivesFn (http://localhost:8001/vendor.js:43384:13)
    at Object.updateDirectives (http://localhost:8001/main.js:152469:420)"

当我关闭AOT时，它没有给出此错误。这次，ngModel无法正常工作。 如何在不关闭AOT的情况下解决此问题？

import {Compiler,Component,ComponentFactory,ComponentRef,Input,NgModule,OnInit,ViewChild,ViewContainerRef} from '@angular/core';
import {SharedModule} from '@app/modules/shared/shared.module';
import {CommonModule} from '@angular/common';
import {UtilService} from '@app/modules/shared/services/util.service';
import {FormBuilder,FormControl,FormGroup,FormsModule,ReactiveFormsModule} from '@angular/forms';

@Component({
  selector: 'kl-sector-form',templateUrl: './sector-form.component.html'
})
export class SectorFormComponent implements OnInit {
  @ViewChild('container',{read: ViewContainerRef,static: true}) private container: ViewContainerRef;
  private componentRef: ComponentRef<{}>;

  instance = [
    'mode','isReadOnly','selectedTab','selectedType','addedInputData','entity','input'
  ];

  options: Array<{
    description: string;
    value: string
  }>;

  selectedTab = 'input';
  selectedType = 'text';
  addedInputData = {
    controlName: '',controlType: '',optionName: '',dataKey: '',valueType: '',currentValue: '',label: '',placeholder: '',dateFormat: '',options: [],validators: {
      required: true,minlength: null,maxlength: null
    }
  };

  inputs = [];

  constructor(private compiler: Compiler) {
  }

  ngOnInit() {
    this.compileTemplate();
  }

  compileTemplate() {
    const Metadata = {
      selector: `dynamic-form`,template: this.template
    };
    const factory = this.createComponent(this.compiler,Metadata);
    if (this.componentRef) {
      this.componentRef.destroy();
      this.componentRef = null;
    }
    this.componentRef = this.container.createComponent(factory);
    const instance: any = this.componentRef.instance;
    if (instance) {
      for (let i = 0; i < this.instance.length; i++) {
        instance[this.instance[i]] = this[this.instance[i]];
      }
    }
  }

  private createComponent(compiler: Compiler,Metadata: Component): ComponentFactory<any> {
    const component = class DynamicComponent implements OnInit {

      ngOnInit() {
      }
    };
    const dynamicComponent = Component(Metadata)(component);

    @NgModule({
      imports: [
        CommonModule,SharedModule.forRoot(),ReactiveFormsModule,],declarations: [dynamicComponent],providers: [FormBuilder]
    })
    class DynamicFormModule {
    }

    const module = compiler.compileModuleAndAllComponentsSync(DynamicFormModule);
    return module.componentFactories.find(f => f.componentType === dynamicComponent);
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）