Angular 15动态创建内存组件兼容改造及报错解决咨询

问题根源 #

1. NG2007错误：Ivy编译器对Angular类的装饰器检查更严格。当类实现OnInit/AfterViewInit等生命周期接口，或使用@Output这类Angular装饰器时，必须在编译阶段就存在明确的Angular装饰器（如@Component/@Directive）。动态添加Component装饰器的方式无法通过编译期检查。

2. NG0202错误：添加@Directive()装饰器后，Angular的依赖注入系统会认为该类可能有构造函数依赖，但实际类的构造函数无参数，导致运行时DI解析失败。

解决方案 #

步骤1：启用JIT编译支持 #

动态组件编译依赖JIT编译器，Angular 15默认启用AOT，需做以下配置：

• 在AppModule中导入CompilerModule：

import { NgModule, CompilerModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, CompilerModule], // 新增CompilerModule
  bootstrap: [AppComponent]
})
export class AppModule {}

• 修改angular.json的serve配置，禁用AOT：

"architect": {
  "serve": {
    "options": {
      "aot": false, // 设置为false
      // 其他配置...
    }
  }
}

步骤2：修改动态组件创建代码 #

直接在类上使用@Component装饰器（传入动态的template和selector参数），同时保留生命周期钩子的实现：

import { Component, NgModule, Compiler, OnInit, AfterViewInit, Output, EventEmitter, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

// 在宿主组件/服务中注入Compiler
constructor(private compiler: Compiler) {}

createComponent(template: string, selector: string) {
  // 直接用动态参数定义@Component装饰器
  @Component({
    selector: selector,
    template: template
  })
  class AngularComponent implements OnInit, AfterViewInit {
    @Output() onAfterViewInit = new EventEmitter<boolean>();

    ngOnInit(): void {
      // 自定义OnInit逻辑
    }

    ngAfterViewInit(): void {
      this.onAfterViewInit.emit(true);
      // 自定义AfterViewInit逻辑
    }
  }

  @NgModule({
    declarations: [AngularComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
  })
  class TemplateModule {}

  // 编译模块并获取组件工厂
  const compiledResult = this.compiler.compileModuleAndAllComponentsSync(TemplateModule);
  const componentFactory = compiledResult.componentFactories.find(f => f.componentType === AngularComponent);

  return componentFactory;
}

代码说明 #

• 直接在类上应用@Component装饰器，满足Ivy的编译期检查要求，同时支持动态传入template和selector参数。
• 通过Compiler.compileModuleAndAllComponentsSync编译动态模块，获取组件工厂后即可通过ViewContainerRef.createComponent创建实例。

额外注意事项 #

• 动态组件编译仅支持JIT模式，若需生产环境使用该功能，需将生产构建的aot设置为false（但这会影响构建性能，需权衡）。
• 确保@angular/compiler包已正确安装（默认已包含在Angular项目中）。

内容的提问来源于stack exchange，提问作者Shikhar Ambashta