Angular 15+Capacitor在Android API29运行报错：Unexpected token ?

问题原因 #

Android 10（API 29）内置的WebView基于Chromium 77，这个版本不支持ES2020引入的**可选链操作符（?.）**语法。你的Angular 15项目默认构建输出的代码里包含了这个特性，导致WebView解析失败，触发语法错误，最终出现白屏。

你之前修改tsconfig.json的target和添加.browserslistrc没生效，核心原因是Angular 15默认用esbuild作为构建工具，它的构建配置和TypeScript的编译配置是分离的——单独改TypeScript的target，没法完全控制esbuild最终输出的JS语法版本。

解决方案 #

1. 调整Angular esbuild构建配置 #

打开项目根目录的angular.json，找到你的应用的build节点，确保设置target为es2015并开启es5BrowserSupport：

"projects": {
  "你的应用名称": {
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:browser-esbuild",
        "options": {
          "target": "es2015",
          "es5BrowserSupport": true,
          // 保留其他原有配置
        }
      }
    }
  }
}

2. 修正TypeScript编译配置 #

修改tsconfig.json的compilerOptions，确保目标版本和依赖库设置正确：

{
  "compilerOptions": {
    "target": "ES2015",
    "lib": ["ES2015", "DOM", "DOM.Iterable"],
    "downlevelIteration": true,
    // 保留其他原有配置
  }
}

3. 配置browserslist规则 #

在项目根目录创建或修改.browserslistrc文件，明确指定兼容Android 10：

defaults
Android 10
last 2 Chrome versions

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

执行以下命令清理旧缓存和构建产物，重新安装依赖并构建：

rm -rf node_modules .angular dist
npm install
ng build --prod

完成后重新部署到Android 10模拟器，白屏问题应该就能解决。

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