Angular Ionic项目白屏且vendor.js报Uncaught SyntaxError如何解决

报错信息：Uncaught SyntaxError: Unexpected token ( vendor.js:105268
相关截图：

该错误是打包后的vendor.js包含了运行环境不支持的ES高阶语法导致的，可按以下步骤排查修复：

• 第一步：定位具体错误语法
  打开chrome://inspect/#devices进入调试界面，点击报错对应的vendor.js行号，查看105268行的具体代码，确认是哪类未兼容的语法（常见为箭头函数、类字段声明、可选链操作符、Nullish 合并操作符等）。
• 第二步：调整TS编译目标版本
  检查项目根目录下tsconfig.json的compilerOptions.target配置，若运行在安卓7以下、iOS10以下的低版本系统，需将编译目标修改为ES5，保证语法向下兼容：

  {
    "compilerOptions": {
      "target": "ES5"
    }
  }
  

• 第三步：适配浏览器支持列表
  检查项目根目录下.browserslistrc文件，添加需要兼容的低版本环境规则，示例配置（兼容安卓6+、iOS10+）：

  Android >= 6
  iOS >= 10
  last 2 versions
  IE 11 # 不需要IE兼容可删除
  

• 第四步：处理未转译的第三方依赖
  vendor.js是第三方依赖的打包产物，若错误来自node_modules中的某款依赖，Angular默认不会转译node_modules下的代码，需要在angular.json中配置需要额外转译的依赖包：

  {
    "projects": {
      "app": {
        "architect": {
          "build": {
            "options": {
              "allowedCommonJsDependencies": ["你需要转译的依赖包名"]
            }
          }
        }
      }
    }
  }
  

• 第五步：验证基础项目适配性
  若空白项目也出现该问题，检查你使用的Angular、Ionic版本与运行环境的匹配度：Angular 14+默认不再兼容ES5，若必须运行在低版本设备，需降级到Angular 13及以下版本，或者配置自定义转译规则。

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