Ionic 7默认应用在Android模拟器运行时白屏报错求助

环境信息 #

• Ionic 7.2.0
• npm 10.8.2
• Angular 18.1.1
• Node.js 20.16.0
• Capacitor 6.1.1
• Android API 27
• Windows 11 64位
• JDK 17（因兼容性问题多次安装卸载Java版本并修改环境变量）

操作过程 #

• 通过ionic start创建Angular基础Ionic项目，尝试tabs等多个默认模板均出现相同问题
• 执行命令序列：ng build（出现20条伪类选择器黄色警告）→ npx cap copy → npx cap sync → ionic capacitor add android → ionic capacitor run android，除ng build外其余命令无警告或错误
• ionic serve可在浏览器正常运行无警告，但模拟器中显示白屏

报错详情 #

Chrome设备调试控制台报错 #

Warning The key "viewport-fit" is not recognized and ignored.
localhost/:820 

SyntaxError: Unexpected token {
cap.handleError.err @ localhost/:820
/polyfills.45b15749fa958a1d.js:1 

Uncaught SyntaxError: Unexpected token {
localhost/:820 SyntaxError: Unexpected token {
cap.handleError.err @ localhost/:820
/main.c16a3b803172a61a.js:1 

Uncaught SyntaxError: Unexpected token {

Android Studio Logcat报错 #

W  Attempt to remove non-JNI local reference, dumping thread

W  File: https://localhost/ - Line 1298 - Msg: The key "viewport-fit" is not recognized and ignored.

E  Style contains key with bad entry: 0x01010586

E  [ERROR:gl_surface_egl.cc(289)] eglChooseConfig failed with error EGL_SUCCESS

E  File: https://localhost/ - Line 820 - Msg: SyntaxError: Unexpected token {

E  File: https://localhost/polyfills.45b15749fa958a1d.js - Line 1 - Msg: Uncaught SyntaxError: Unexpected token {

E  JavaScript Error: {"type":"js.error","error":{"message":"Uncaught SyntaxError: Unexpected token {","url":"https://localhost/main.c16a3b803172a61a.js","line":1,"col":11,"errorObject":"{}"}}

E File: https://localhost/ - Line 820 - Msg: SyntaxError: Unexpected token {

E  File: https://localhost/main.c16a3b803172a61a.js - Line 1 - Msg: Uncaught SyntaxError: Unexpected token {

疑问 #

该问题的原因是什么，如何解决？

根源分析 #

1. WebView版本过低：模拟器使用的WebView版本为61.0.3163.98，而Angular 18编译后的代码采用了ES2020+新语法（如可选链、空值合并等），低版本WebView无法解析这些语法，直接触发Unexpected token {错误。
2. Android API 27兼容性不足：API 27对应Android 8.1系统，默认WebView版本原生偏低，无法支持Angular 18生成的现代JS代码。

修复方法 #

方法一：升级模拟器WebView（推荐） #

• 打开模拟器，进入设置→应用→查看所有应用→Android System WebView
• 点击“更新”按钮（需确保模拟器联网），将WebView升级至Chrome 90+版本
• 重启模拟器后重新执行ionic capacitor run android

方法二：配置Angular兼容低版本浏览器 #

修改项目根目录下的配置文件：

1. 编辑tsconfig.json，将compilerOptions.target从ES2022或更高版本改为ES2015：

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

2. 编辑angular.json，在build.options中添加浏览器兼容规则：

"build": {
  "builder": "@angular-devkit/build-angular:application",
  "options": {
    // 其他配置保持不变
    "browser": {
      "targets": "> 0.5%, last 2 versions, Firefox ESR, not dead, Android >= 7"
    }
  }
}

3. 重新执行ng build、npx cap copy、npx cap sync、ionic capacitor run android

方法三：升级Android API版本 #

• 创建模拟器时选择Android API 30及以上版本（对应Android 11+），这类系统默认WebView版本更高，原生支持现代JS语法
• 重新同步项目并运行

额外提示 #

• viewport-fit警告属于非致命问题，可忽略；若要消除，可移除index.html中<meta name="viewport">标签内的viewport-fit=cover属性
• JDK 17与当前环境兼容，无需调整Java版本

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