Angular生产构建报JIT compilation failed: '@angular/compiler' not loaded如何解决

报错信息：Angular JIT compilation failed: '@angular/compiler' not loaded!

问题成因 #

该报错仅出现在生产构建而开发模式正常，核心原因是Angular开发与生产构建的默认编译策略不一致，具体触发原因如下：

• 开发模式默认使用JIT（即时编译），会自动引入@angular/compiler编译器依赖；生产构建默认开启AOT（预编译）+ 摇树优化，未显式引用的@angular/compiler会被当作冗余依赖剔除。
• 项目启动逻辑使用了JIT专属引导方式，且生产构建配置关闭了AOT开关，导致运行时找不到编译器。
• 项目中存在动态创建未声明组件、动态导入模板/样式等依赖JIT编译的代码，生产环境缺失编译器无法执行相关逻辑。

排查修复方案 #

方案1：启用生产AOT编译（生产环境推荐） #

生产环境使用AOT可以提升运行性能、减小产物体积，是官方推荐的方案，操作步骤如下：

1. 检查项目根目录下angular.json的生产构建配置，确保AOT和构建优化器开关开启：

{
  "projects": {
    "<你的项目名称>": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "aot": true,
              "buildOptimizer": true
            }
          }
        }
      }
    }
  }
}

2. 确认主入口文件（通常为src/main.ts）引导逻辑符合AOT要求，Angular 9+ Ivy引擎下无需修改原有引导代码，低版本可切换为AOT专属引导写法：

// Angular 9+ 通用写法，只要开启aot配置会自动预编译
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

3. 处理动态组件逻辑：如果项目存在动态创建组件的需求，Angular 8及以下版本需要将动态用到的组件加入对应模块的entryComponents数组中，Ivy版本无需额外配置。
4. 排查第三方依赖：如果开启AOT后出现其他编译错误，优先检查引用的老旧Angular组件库是否支持AOT，升级到对应兼容版本即可。

方案2：临时保留JIT编译（不推荐生产长期使用） #

如果暂时无法完成AOT改造，可临时强制引入编译器解决报错，操作如下：
在src/main.ts文件最顶部添加引入语句：

import '@angular/compiler';
// 原有启动逻辑保持不变

注意该方案会使产物体积增大200-300KB，且运行时编译会降低首屏加载性能，仅适合临时过渡使用。

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