Angular 16运行时渲染模板报错及JIT按需加载问题求助

问题背景 #

我正在使用Angular 16.0.3，尝试开发一个可接收模板字符串（可能包含Angular组件，且大概率从服务器获取）并在运行时渲染的组件。

尝试代码 #

dynamic-template.component.ts

import { Component, Input, ViewChild, ViewContainerRef, ɵcompileComponent } from '@angular/core';

@Component({
selector: 'app-dynamic-template',
template: '<ng-container #container></ng-container>'
})
export class DynamicTemplateComponent {
@Input() content: string
@ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef

constructor() {}

generate(): void {
const component = getComponentFromTemplate(this.content)
this.container.clear();
const componentRef = this.container.createComponent(component);
console.log(componentRef)
}
}

@Component({
template: '',
}) class TemplateComponent {
@ViewChild('heading') heading: HTMLHeadingElement
}

function getComponentFromTemplate(template: string) {
ɵcompileComponent(TemplateComponent, {
template,
standalone: true,
});

return TemplateComponent;
}

报错信息 #

Console

JIT compilation failed for component class TemplateComponent {}
ERROR Error: The component 'TemplateComponent' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available.

JIT compilation is discouraged for production use-cases! Consider using AOT mode instead.
Alternatively, the JIT compiler should be loaded by bootstrapping using '@angular/platform-browser-dynamic' or '@angular/platform-server',
or manually provide the compiler with 'import "@angular/compiler";' before bootstrapping.
at getCompilerFacade (core.mjs:5088:15)
at TemplateComponent.get [as ɵcmp] (core.mjs:24683:34)
at getComponentDef (core.mjs:1839:16)
at ViewContainerRef.createComponent (core.mjs:23218:31)
at DynamicHtmlComponent.generate (dynamic-html.component.ts:16:41)
at GuestComponent.generate (guest.component.ts:16:27)
at GuestComponent_Template_button_click_3_listener (guest.component.html:3:20)
at executeListenerWithErrorHandling (core.mjs:15700:16)
at wrapListenerIn_markDirtyAndPreventDefault (core.mjs:15733:22)
at HTMLButtonElement.<anonymous> (platform-browser.mjs:666:17)

问题解答 #

1. 修复报错的方法 #

报错核心是Angular默认AOT编译模式下未包含JIT编译器，解决步骤如下：

• 安装JIT编译器依赖：执行命令安装@angular/compiler

  npm install @angular/compiler
  

• 导入编译器：在使用动态模板的组件文件（如dynamic-template.component.ts）顶部添加导入语句，确保JIT环境可用

  import '@angular/compiler';
  

• 优化组件编译逻辑：复用同一个TemplateComponent类会导致重复编译冲突，建议每次生成动态组件时创建新的类：

  function getComponentFromTemplate(template: string) {
    // 每次创建全新的组件类，避免复用导致的编译异常
    @Component({
      template: '',
      standalone: true
    })
    class DynamicTemplateComponent {}
  
    ɵcompileComponent(DynamicTemplateComponent, {
      template,
      standalone: true,
    });
  
    return DynamicTemplateComponent;
  }
  

2. 仅让懒加载子模块使用JIT编译器 #

可以实现，核心思路是将JIT相关代码和依赖隔离在懒加载模块中，主应用保持AOT编译，步骤如下：

• 创建懒加载模块：新建DynamicTemplateModule，将DynamicTemplateComponent声明在该模块内，并在模块文件顶部导入JIT编译器：

  // dynamic-template.module.ts
  import '@angular/compiler';
  import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { DynamicTemplateComponent } from './dynamic-template.component';
  
  @NgModule({
    declarations: [DynamicTemplateComponent],
    imports: [CommonModule]
  })
  export class DynamicTemplateModule { }
  

• 配置懒加载路由：在主路由配置中添加该模块的懒加载路径，只有访问该路由时才加载JIT相关代码：

  // app-routing.module.ts
  import { Routes } from '@angular/router';
  
  const routes: Routes = [
    // 其他路由配置
    {
      path: 'dynamic-content',
      loadChildren: () => import('./dynamic-template/dynamic-template.module').then(m => m.DynamicTemplateModule)
    }
  ];
  

• 使用组件：通过懒加载路由访问该模块，此时只有该模块会加载JIT编译器，主应用包体积不受影响。

内容的提问来源于stack exchange，提问作者Enzo Rodrigues