Angular 12升级至15+后如何设置TypeScript编译目标为ES5？

1. 锁定tsconfig.json的编译参数 #

在项目根目录的tsconfig.json中，明确指定编译目标和类字段配置，覆盖CLI的默认值：

{
  "compilerOptions": {
    "target": "es5",
    "useDefineForClassFields": false,
    "module": "es2020",
    // 保留你原有配置里的其他参数
  }
}

2. 在angular.json中强制CLI使用自定义配置 #

Angular 15+会自动根据浏览器列表推断编译目标，所以必须在angular.json的构建配置里强制指定目标版本：
找到项目对应的build配置节点，添加/修改以下参数：

{
  "projects": {
    "your-project-name": { // 替换成你的项目名称
      "architect": {
        "build": {
          "options": {
            "target": "es5",
            "tsConfig": "./tsconfig.json",
            // 保留原有构建配置的其他参数
          }
        }
      }
    }
  }
}

3. 确保browserslist配置兼容ES5 #

检查根目录的.browserslistrc文件（或package.json中的browserslist字段），确保包含支持ES5的浏览器条目，比如：

> 0.5%
last 2 versions
Firefox ESR
not dead
IE 11

如果不需要IE11，保留其他兼容ES5的条目即可，避免CLI因为浏览器列表推断出更高的ES版本。

4. 清理缓存并重新构建 #

执行命令清理缓存后重新编译，确保配置生效：

npx ng cache clean
npx ng build

这样操作后，Angular CLI就不会自动将编译目标切换为ES2022，项目会以ES5为目标编译，解决渲染异常和警告问题。

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