Ionic 6安卓模拟器启动报错：Unexpected token ?

问题现象 #

在安卓模拟器中运行Ionic 6应用时，应用直接崩溃，Logcat输出如下错误：

JavaScript Error: {"type":"js.error","error":{"message":"Uncaught SyntaxError: Unexpected token ?","url":"http://localhost/vendor.js","line":24288,"col":28,"errorObject":"{}"}} File: http://localhost/ - Line 582 - Msg: SyntaxError: Unexpected token ? File: http://localhost/vendor.js - Line 24288 - Msg: Uncaught SyntaxError: Unexpected token ?

问题代码定位 #

查看vendor.js第24288行，对应代码为：

this._baseHref = href ?? this._platformLocation.getBaseHrefFromDOM() ?? (0,_angular_core__WEBPACK_IMPORTED_MODULE_0__.inject)(DOCUMENT).location?.origin ?? '';

该代码属于PathLocationStrategy类（继承自LocationStrategy），错误出现在**空值合并操作符（??）和可选链操作符（?.）**处——这两个是ES2020新增的语法特性。

项目依赖配置 #

项目package.json的依赖如下：

"dependencies": { 
  "@angular/common": "^14.2.3", 
  "@angular/core": "^14.2.3", 
  "@angular/forms": "^14.2.3", 
  "@angular/platform-browser": "^14.2.3", 
  "@angular/platform-browser-dynamic": "^14.2.3", 
  "@angular/router": "^14.2.3", 
  "@capacitor/android": "^4.3.0", 
  "@capacitor/app": "^4.0.1", 
  "@capacitor/core": "^4.3.0", 
  "@capacitor/filesystem": "^4.1.1", 
  "@capacitor/haptics": "^4.0.0", 
  "@capacitor/ios": "^4.3.0", 
  "@capacitor/keyboard": "^4.0.0", 
  "@capacitor/status-bar": "^4.0.0", 
  "@ionic-native/camera": "^5.36.0", 
  "@ionic-native/core": "^5.36.0", 
  "@ionic-native/file": "^5.36.0", 
  "@ionic-native/splash-screen": "^5.36.0", 
  "@ionic-native/status-bar": "^5.36.0", 
  "@ionic/angular": "^6.2.9", 
  "@ngx-translate/core": "^14.0.0", 
  "@ngx-translate/http-loader": "^7.0.0", 
  "animate.css": "^4.1.1", 
  "cordova-plugin-camera": "^6.0.0", 
  "cordova-plugin-file": "^7.0.0", 
  "date-fns": "^2.29.0", 
  "ionic-selectable": "^4.9.0", 
  "rxjs": "~7.5.7", 
  "tslib": "^2.4.0", 
  "twilio-video": "^2.24.1", 
  "zone.js": "~0.11.8" 
}, 
"devDependencies": { 
  "@angular-devkit/architect": "^0.1402.4", 
  "@angular-devkit/build-angular": "^14.2.3", 
  "@angular-devkit/core": "^14.2.4", 
  "@angular-eslint/builder": "~13.3.0", 
  "@angular-eslint/eslint-plugin": "~13.3.0", 
  "@angular-eslint/eslint-plugin-template": "~13.3.0", 
  "@angular-eslint/template-parser": "~13.3.0", 
  "@angular/cli": "^14.2.3", 
  "@angular/compiler": "^14.2.3", 
  "@angular/compiler-cli": "^14.2.3", 
  "@angular/language-service": "^14.2.3", 
  "@capacitor/cli": "^4.0.0", 
  "@ionic/angular-toolkit": "^7.0.0", 
  "@types/jasmine": "~3.6.0", 
  "@types/jasminewd2": "~2.0.3", 
  "@types/node": "^12.11.1", 
  "@typescript-eslint/eslint-plugin": "4.16.1", 
  "@typescript-eslint/parser": "4.16.1", 
  "cordova-plugin-device": "^2.0.2", 
  "cordova-plugin-ionic-keyboard": "^2.2.0", 
  "cordova-plugin-ionic-webview": "^4.2.1", 
  "cordova-plugin-splashscreen": "^5.0.2", 
  "cordova-plugin-statusbar": "^2.4.2", 
  "eslint": "^7.6.0", 
  "eslint-plugin-import": "2.22.1", 
  "eslint-plugin-jsdoc": "30.7.6", 
  "eslint-plugin-prefer-arrow": "1.2.2", 
  "jasmine-core": "~3.8.0", 
  "jasmine-spec-reporter": "~5.0.0", 
  "karma": "~6.3.2", 
  "karma-chrome-launcher": "~3.1.0", 
  "karma-coverage": "~2.0.3", 
  "karma-coverage-istanbul-reporter": "~3.0.2", 
  "karma-jasmine": "~4.0.0", 
  "karma-jasmine-html-reporter": "^1.5.0", 
  "protractor": "~7.0.0", 
  "ts-node": "~10.9.1", 
  "typescript": "~4.8.4" 
}

解决方案 #

1. 更新安卓模拟器的WebView版本 #

错误根源是模拟器中的Android System WebView版本过低，不支持ES2020的??和?.语法。操作步骤：

• 打开模拟器的Google Play应用商店
• 搜索并更新Android System WebView应用
• 重启模拟器后重新运行应用

2. 调整Angular编译目标，兼容旧版JS环境 #

修改tsconfig.json中的编译目标，将ES2020语法转译为更低版本的JS：

• 打开项目根目录的tsconfig.json
• 将compilerOptions.target的值改为ES2015：

"compilerOptions": {
  "target": "ES2015",
  // 其他配置保持不变
}

• 确保src/polyfills.ts中引入必要的兼容补丁：

import 'core-js/es/object/optional-chaining';
import 'core-js/es/object/nullish-coalescing';

• 重新构建项目并同步到安卓：

ng build --prod
npx cap sync android

3. 升级Cordova WebView插件 #

当前使用的cordova-plugin-ionic-webview版本为4.2.1，可升级到最新稳定版以使用更现代的WebView引擎：

npm install cordova-plugin-ionic-webview@latest --save
npx cap sync android

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