如何在Angular的angular.json中配置自定义AOT编译选项？

1. 定位angular.json中的AOT配置节点 #

在你的angular.json文件里，找到对应项目的architect -> build -> options区块。默认情况下aot可能是一个布尔值（true/false），但要自定义编译设置，需要把它改成对象格式来配置更多参数。

2. 设置AOT优化级别 #

你提到的optimizationLevel需要放在aot对象内，不同级别对应不同的编译优化强度：

• 0: 禁用所有AOT优化，仅完成基础编译
• 1: 基础优化（死代码消除、Tree-Shaking 基础处理）
• 2: 高级优化（代码压缩、表达式简化、Tree-Shaking 增强）

配置示例：

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          "aot": {
            "optimizationLevel": 2,
            "enableIvy": true // Angular 9+默认启用，建议保持开启
          },
          "optimization": true // 顶层优化开关，需配合AOT优化使用
        }
      }
    }
  }
}

3. 配置自定义转换器（进一步性能优化） #

自定义转换器允许你在AOT编译过程中对TypeScript代码做定制化修改，比如移除调试代码、简化重复逻辑等，从而进一步压缩包体积、提升运行效率。

步骤1：编写自定义转换器 #

在项目中创建转换器文件，比如src/custom-transformers.ts，示例代码如下：

import { TransformerFactory } from '@angular/compiler-cli';
import * as ts from 'typescript';

// 示例：移除所有console.log调用
export const removeConsoleLogs: TransformerFactory<ts.SourceFile> = (context) => {
  return (sourceFile) => {
    const visitNode = (node: ts.Node): ts.Node => {
      if (ts.isCallExpression(node) && node.expression.getText() === 'console.log') {
        return ts.createEmptyStatement(); // 将console.log替换为空语句
      }
      return ts.visitEachChild(node, visitNode, context);
    };
    return ts.visitNode(sourceFile, visitNode);
  };
};

步骤2：在angular.json中配置转换器 #

将转换器路径添加到aot对象的transformers数组中，格式为文件路径#导出的转换器名称：

"aot": {
  "optimizationLevel": 2,
  "transformers": [
    "./src/custom-transformers#removeConsoleLogs"
  ]
}

如果你的转换器是npm包提供的，直接写包名#转换器导出名即可。

4. 其他实用AOT配置项 #

• fullTemplateTypeCheck: 设置为true，启用完整的模板类型检查，提前发现模板中的类型错误，避免运行时问题
• strictInjectionParameters: 设置为true，严格检查依赖注入参数的类型正确性
• preserveWhitespaces: 设置为false，移除模板中的空白字符，减少编译后代码体积

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