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:
<code> 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
<code> 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
</code>
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:
Android SDK built for x86
WebView in io.ionic.starter (61.0.3163.98)
<code>Remote Target
#LOCALHOST
Android SDK built for x86
#EMULATOR-5554
WebView in io.ionic.starter (61.0.3163.98)
</code>
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:
<code>Warning The key "viewport-fit" is not recognized and ignored.
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 {
<code>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 {
</code>
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:
<code>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 {
<code>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 {
</code>
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?