Angular 14中@angular/core Compiler的替代方案及运行时模板编译方法

一、保留运行时编译的配置方法 #

如果你想继续使用动态字符串模板编译，按以下步骤配置：

• 先安装运行时编译依赖包：

  npm install @angular/platform-browser-dynamic --save
  

• 修改angular.json的构建配置，关闭AOT和构建优化：
  在项目的build节点里设置：

  "aot": false,
  "buildOptimizer": false
  

• 替换废弃的Compiler服务，用JitCompilerFactory创建编译器实例：
  封装一个服务处理编译逻辑：

  import { JitCompilerFactory } from '@angular/platform-browser-dynamic';
  import { Compiler, Injectable, Injector } from '@angular/core';
  
  @Injectable()
  export class RuntimeCompilerService {
    private compiler: Compiler;
  
    constructor(private injector: Injector) {
      const compilerFactory = new JitCompilerFactory([{
        useDebug: false,
        useJit: true
      }]);
      this.compiler = compilerFactory.createCompiler();
    }
  
    compileDynamicComponent(template: string, context: any) {
      // 定义动态组件元数据
      const dynamicComponent = {
        selector: 'temp-dynamic-comp',
        template: template,
        inputs: Object.keys(context)
      };
  
      // 编译组件所在的模块
      const moduleResult = this.compiler.compileModuleAndAllComponentsSync({
        declarations: [dynamicComponent],
        imports: [] // 按需导入CommonModule等依赖模块
      });
  
      // 创建组件实例并传入上下文
      const factory = moduleResult.componentFactories.find(f => f.componentType === dynamicComponent);
      const compRef = factory.create(this.injector);
      Object.assign(compRef.instance, context);
      return compRef;
    }
  }
  

• 确保main.ts用platformBrowserDynamic启动应用：

  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { AppModule } from './app/app.module';
  
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
  

这样配置后就能避免template must be a string错误——这个错误本质是AOT模式下Angular会预编译所有模板，不支持动态传入的字符串模板，关闭AOT后就能回到运行时编译逻辑。

二、更适配Angular 14的替代方案（推荐） #

由于Angular的JIT编译API已废弃多时，未来版本可能移除，更推荐以下两种稳定方案：

方案1：简单模板用插值组件 #

如果模板逻辑不算复杂，写个通用组件处理模板插值：

import { Component, Input, SecurityContext } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-dynamic-template',
  template: '<div [innerHTML]="safeTemplate"></div>'
})
export class DynamicTemplateComponent {
  @Input() template: string;
  @Input() context: any;
  safeTemplate: any;

  constructor(private sanitizer: DomSanitizer) {}

  ngOnChanges() {
    if (this.template && this.context) {
      // 处理模板插值，复杂场景可替换为handlebars等第三方库
      const interpolated = this.template.replace(/{{(.*?)}}/g, (_, key) => {
        return this.context[key.trim()] || '';
      });
      this.safeTemplate = this.sanitizer.bypassSecurityTrustHtml(interpolated);
    }
  }
}

使用时直接传入模板和上下文：

<app-dynamic-template 
  [template]="angularTemplateString" 
  [context]="{ firstNameFromPassedInContext: 'Leslie' }"
></app-dynamic-template>

方案2：复杂模板用预编译组件动态加载 #

如果模板逻辑复杂（包含指令、管道等），预先把不同模板做成独立组件，再动态加载：

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { UserProfileComponent } from './user-profile.component';
import { OrderListComponent } from './order-list.component';

@Component({
  selector: 'app-comp-loader',
  template: '<ng-template #compContainer></ng-template>'
})
export class ComponentLoaderComponent {
  @ViewChild('compContainer', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private resolver: ComponentFactoryResolver) {}

  loadComponent(templateKey: string, context: any) {
    this.container.clear();
    let factory;
    switch(templateKey) {
      case 'profile':
        factory = this.resolver.resolveComponentFactory(UserProfileComponent);
        break;
      case 'orders':
        factory = this.resolver.resolveComponentFactory(OrderListComponent);
        break;
    }
    if (factory) {
      const compRef = this.container.createComponent(factory);
      compRef.instance.context = context;
    }
  }
}

这种方式完全兼容AOT编译，性能和稳定性都更好，也是Angular官方推荐的动态组件方案。

内容的提问来源于stack exchange，提问作者Leslie Hanks