Angular CLI 15配置目标ES6却生成ES2020代码问题求助

问题原因 #

Chrome 79并不支持ES2020的空值合并运算符??，你的配置未触发CLI的语法降级逻辑，导致编译结果保留了该运算符。Angular 12+版本会结合.browserslistrc和tsconfig.json的配置确定编译目标，但存在配置优先级冲突或缓存导致的生效异常。

具体解决步骤 #

1. 修正tsconfig.json配置 #

打开项目根目录的tsconfig.json，确保以下配置正确：

{
  "compilerOptions": {
    "target": "ES2015", // ES6对应官方标准的ES2015
    "lib": ["ES2015", "DOM"],
    "downlevelIteration": true,
    "useDefineForClassFields": false // Angular 15默认开启，若有兼容问题可关闭
  }
}

2. 确认angular.json的Build配置 #

检查angular.json中项目的build选项，明确指定编译目标：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "target": "es2015"
          }
        }
      }
    }
  }
}

3. 验证.browserslistrc的生效性 #

在终端执行命令查看当前配置覆盖的浏览器列表，确认Chrome 79被包含：

npx browserslist

如果输出中没有Chrome 79，检查.browserslistrc的语法是否有误（比如Chrome >= 79的空格是否正确）。

4. 清理构建缓存 #

旧缓存可能导致配置不生效，执行清理命令后重新构建：

ng clean
ng build

5. 排查第三方依赖问题 #

如果以上步骤无效，检查项目依赖的第三方库是否输出了未编译的ES2020代码。可以查看node_modules中对应库的打包文件，确认是否包含??运算符。若存在此类库，更换为支持ES6编译的版本即可。

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