如何用Angular Linker解决JIT编译错误并配置Webpack规则？

一、Angular 12 默认Webpack版本 #

Angular 12 默认使用 Webpack 5，这是配置时需要注意的核心前提。

二、"Webpack配置对象包含未知属性'rules'" 错误原因 #

在Angular项目中通过extra-webpack.config.js扩展配置时，不能直接在配置根节点添加rules字段。Angular的Webpack配置是通过@angular-builders/custom-webpack进行合并的，rules必须嵌套在module对象下，而非根级别。

三、正确配置Angular Linker解决JIT错误 #

1. 安装依赖 #

先安装所需的工具包：

npm install @angular/compiler-cli @angular-devkit/build-angular babel-loader @angular/compiler-cli/linker/babel --save-dev

2. 编写正确的extra-webpack.config.js #

针对目标外部库（如ng-option-highlight）添加babel-loader规则，用Angular Linker处理其部分编译的代码：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        include: /node_modules\/ng-option-highlight/, // 仅处理出问题的外部库
        use: {
          loader: 'babel-loader',
          options: {
            plugins: ['@angular/compiler-cli/linker/babel'],
            compact: false
          }
        }
      }
    ]
  }
};

3. 修改angular.json启用自定义Webpack配置 #

找到项目的architect配置段，替换默认构建器为@angular-builders/custom-webpack，并指定自定义配置文件路径：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./extra-webpack.config.js"
      },
      // 保留原有其他配置（如outputPath、index、main等）
    }
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    // 保留原有其他配置
  }
}

4. 检查tsconfig.json配置 #

确保项目自身的angularCompilerOptions中没有冲突设置，若之前手动添加过"compilationMode": "partial"，建议移除；外部库的该配置会由Linker自动处理。

四、原理说明 #

当外部库以compilationMode: "partial"编译时，代码保留了Angular装饰器的原始未处理形式，而Angular 12默认采用AOT编译，无法直接识别这类代码，从而触发JIT编译错误。Angular Linker的作用是将这类部分编译的代码转换为AOT兼容的格式，消除JIT编译触发的条件。

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