I'm using Ionic version 7.2.0, npm version 10.8.2, angular 18.1.1, node 20.16.0, Capacitor version 6.1.1, phone api 27, windows 11 64 bits, jdk-17 (I had to install and uninstall several java versions because it kept giving me compatibility erros, besides changing enviroment variables).
I created a basic ionic project with ionic start, and angular, I tried with many default templates, for example the tabs template and I get the same error.
After creation, I ran ng build, followed by npx cap copy, npx cap sync,ionic capacitor add android and ionic capacitor run android.
After running ng build I get small warnings in yellow:
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
The other commands dont show any warning or errors. When I run Ionic Serve the app shows normally in the browser and works without any warnings, but running on the emulator, it shows the app as a blank screen.
In chrome devices my emulator shows as:
Remote Target
#LOCALHOST
Android SDK built for x86
#EMULATOR-5554
WebView in io.ionic.starter (61.0.3163.98)
In the console I see the following errors and warnings:
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 {
Opening the android folder after build with ionic capacitor build android, the project doesnt show any IDE errors inside android studio. Running the app from there and inspecting logcat I see the same errors as in Chrome devices:
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 {
What is causing this and how can I solve it?
This was a similar problem to the one in this question:
Bug: Android 10 API 29 App launches with white screen
It seems the API version I was using was too low, updating to android API version 35 on the emulator fixed the issue.
Although this was the mistake, there was an error in the order of instructions too, npx cap sync should be executed after adding android.
Also ng build should be replaced with ionic build for better integration.
Using npx cap sync also includes npx cap copy, is redundant. Ionic capacitor run android also includes many of the instructions already so it didnt show any errors when executing even though It wasn't the correct order.
The instructions should have been:
Ionic build
Ionic capacitor add android
Ionic capacitor sync
Ionic capacitor build android
or
Ionic capacitor run android