Ionic 7 默认应用程序在模拟器上运行时显示空白屏幕和错误

Question

我正在使用 Ionic 版本 7.2.0、npm 版本 10.8.2、Angular 18.1.1、node 20.16.0、Capacitor 版本 6.1.1、phone api 27、windows 11 64 位、jdk-17（我必须安装并卸载了几个java版本，因为除了更改环境变量之外，它一直给我带来兼容性错误）。

我使用

ionic start

和 Angular 创建了一个基本的离子项目，我尝试了许多默认模板，例如选项卡模板，但我得到了相同的错误。

创建后，我运行了

ng build

，然后是

npx cap copy

、

npx cap sync

、

ionic capacitor add android

和

ionic capacitor run android

。

运行后

ng build

我收到黄色小警告：

 Generating index html...20 rules skipped due to selector errors:   
  :host-context([dir=rtl]) .ion-float-start -> Unknown pseudo-class :host-context([object Object])
  .ion-float-start:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-end -> Unknown pseudo-class :host-context([object Object])
  .ion-float-end:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-sm-start -> Unknown pseudo-class :host-context([object Object])
  .ion-float-sm-start:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-sm-end -> Unknown pseudo-class :host-context([object Object])
  .ion-float-sm-end:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-md-start -> Unknown pseudo-class :host-context([object Object])
  .ion-float-md-start:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-md-end -> Unknown pseudo-class :host-context([object Object])
  .ion-float-md-end:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-lg-start -> Unknown pseudo-class :host-context([object Object])
  .ion-float-lg-start:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-lg-end -> Unknown pseudo-class :host-context([object Object])
  .ion-float-lg-end:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-xl-start -> Unknown pseudo-class :host-context([object Object])
  .ion-float-xl-start:dir(rtl) -> Unknown pseudo-class :dir
  :host-context([dir=rtl]) .ion-float-xl-end -> Unknown pseudo-class :host-context([object Object])
  .ion-float-xl-end:dir(rtl) -> Unknown pseudo-class :dir        

其他命令不显示任何警告或错误。当我运行

Ionic Serve

时，应用程序在浏览器中正常显示，并且运行时没有任何警告，但在模拟器上运行时，它会将应用程序显示为空白屏幕。

在 Chrome 设备中，我的模拟器显示为：

Remote Target
#LOCALHOST
Android SDK built for x86
#EMULATOR-5554
WebView in io.ionic.starter (61.0.3163.98)

在控制台中我看到以下错误和警告：

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 {

使用

ionic capacitor build android

构建后打开android文件夹，该项目在android studio内没有显示任何IDE错误。从那里运行应用程序并检查 logcat 我看到与 Chrome 设备中相同的错误：

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 {

造成这种情况的原因是什么以及如何解决？

Answer 1

这与本问题中的问题类似：

错误：Android 10 API 29 应用程序启动时出现白屏

看来我使用的API版本太低，在模拟器上更新到android API版本35解决了这个问题。