Angular 15兼容Chrome 69报错：Unexpected token .

Chrome 69仅支持到ES2018语法，而你的tsconfig.json将编译目标设为ES2022，导致编译后的polyfills.js和main.js包含旧浏览器无法识别的高版本语法（比如可选链?.），从而抛出Unexpected token .错误。

按以下步骤调整配置，确保代码兼容Chrome 69：

1. 修改tsconfig.json编译参数
   将compilerOptions中的target改为Chrome 69支持的最高ES版本ES2018，同步调整lib数组：

   "compilerOptions": {
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
     "downlevelIteration": true,
     "experimentalDecorators": true,
     "allowSyntheticDefaultImports": true,
     "module": "es2020",
     "moduleResolution": "node",
     "importHelpers": true,
     "target": "ES2018",
     "typeRoots": [
       "node_modules/@types"
     ],
     "lib": [
       "es2018",
       "dom"
     ],
     "useDefineForClassFields": false
   }
   

2. 配置目标浏览器清单
   在项目根目录的.browserslistrc或package.json的browserslist字段中，明确添加Chrome 69：

   Chrome >= 69
   

   这会让Angular CLI自动根据目标浏览器兼容性调整编译逻辑，确保输出代码适配旧版本浏览器。

3. 验证core-js版本
   确保安装的core-js为v3.x版本（Angular 15推荐版本），若版本不符，执行更新命令：

   npm install core-js@latest
   

   保持polyfills.ts中的import 'core-js/stable';导入不变。

4. 重新构建项目
   执行构建命令生成兼容代码：

   ng build --prod
   

完成上述操作后，重新在Chrome 69中测试应用即可正常加载。

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