升级Angular 15后Web组件在旧版Chrome 53中无法运行

核心问题 #

Angular 15的CLI会强制将compilerOptions.target设为ES2022，而Chrome 53不支持ES2022语法，导致出现Uncaught SyntaxError: Unexpected token {错误，直接修改tsconfig.json会被CLI自动重置。

解决步骤 #

• 通过overrideTsConfig绕过CLI自动配置
  在angular.json的项目构建配置中，添加overrideTsConfig指定自定义TypeScript配置文件，让CLI优先使用该配置：

  {
    "projects": {
      "your-project-name": {
        "architect": {
          "build": {
            "options": {
              "overrideTsConfig": "./tsconfig.es5.json",
              // 保留其他原有配置
            }
          }
        }
      }
    }
  }
  

• 创建自定义tsconfig.es5.json
  新建该文件，继承原有tsconfig并覆盖目标编译版本和类字段配置：

  {
    "extends": "./tsconfig.json",
    "compilerOptions": {
      "target": "ES5",
      "useDefineForClassFields": false
    }
  }
  

• 调整polyfills加载顺序
  确保在Angular代码加载前，按以下顺序导入polyfills（可放在index.html的<head>标签内）：

  <script src="node_modules/@webcomponents/custom-elements-es5-adapter/custom-elements-es5-adapter.js"></script>
  <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
  

• 确认browserlist配置
  在.browserslistrc中明确添加Chrome 53的兼容规则：

  Chrome >= 53
  

  之后使用生产模式构建项目：

  ng build --configuration production
  

原理说明 #

Angular 15+的CLI会根据项目类型（如是否启用独立组件）自动优化TypeScript配置，直接修改根tsconfig.json的target会被CLI覆盖。通过overrideTsConfig指定自定义配置，能强制CLI使用ES5编译目标，配合正确的polyfills和browserlist设置，即可让Web组件在旧版Chrome中正常运行。

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