Angular 18升级后遇Uncaught EvalError：CSP阻止Function()调用的排查与修复

错误来源分析 #

这个Function()调用通常来自以下场景：

• 你的业务代码中直接使用了Function()构造函数动态生成代码，或者依赖了Angular的JIT编译器API（比如Compiler、ComponentFactoryResolver）。
• 项目中引入的第三方库（如旧版本的UI组件、表单工具、状态管理库）尚未适配Angular 18的AOT-only生产构建，内部仍在调用JIT相关逻辑。

Angular 18默认生产构建完全移除了JIT编译器相关代码，因此任何依赖JIT的调用都会触发这个错误。

解决步骤 #

1. 排查并修改自身代码 #

• 查找代码中是否有import { Compiler, ComponentFactoryResolver } from '@angular/core';的导入，替换为Angular 16+推荐的动态组件创建方式：
  使用ViewContainerRef.createComponent配合动态import()导入组件，示例：

  import { ViewContainerRef, inject } from '@angular/core';
  
  async loadDynamicComponent() {
    const { DynamicComponent } = await import('./dynamic.component');
    const vcr = inject(ViewContainerRef);
    vcr.clear();
    vcr.createComponent(DynamicComponent);
  }
  

• 检查是否有用new Function(...)的动态代码生成逻辑，替换为静态实现或其他安全的代码复用方式。

2. 升级第三方依赖 #

• 检查package.json中所有Angular生态相关依赖（如@angular/material、ngrx/store、ng-zorro-antd等），升级到支持Angular 18的最新版本。
• 如果某个库暂无适配版本，可临时在angular.json中关闭AOT（仅作过渡，不推荐生产环境）：
  在projects.[你的项目名].architect.build.options中添加：

  "aot": false,
  "buildOptimizer": false
  

  此方案会增大包体积，仅作为临时 workaround，需尽快等待库更新。

3. 验证CLI配置 #

• 确认angular.json中生产构建配置（configurations.production）的aot为true（Angular 18默认已开启），避免手动开启JIT的残留配置。
• 确保@angular/compiler仅存在于devDependencies中，而非dependencies，防止生产包中引入JIT代码。

内容的提问来源于stack exchange，提问作者ochs.tobi