Ionic 7 capacitor - new app with stuck white screen in android 8.1 or 7

[ahmadklsany]

hi every one :
i have issue in ionic 7 - angular - capacitor
i create a new app and just test it in android v 8.1 and i face this error
my app info

  Require stack:
   - /Users/someone/.nvm/versions/node/v18.15.0/lib/node_modules/@ionic/cli/lib/project/index.js
   - /Users/someone/.nvm/versions/node/v18.15.0/lib/node_modules/@ionic/cli/lib/index.js
   - /Users/someone/.nvm/versions/node/v18.15.0/lib/node_modules/@ionic/cli/index.js
   - /Users/someone/.nvm/versions/node/v18.15.0/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

Ionic CLI : 7.1.1 (/Users/someone/.nvm/versions/node/v18.15.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 7.6.0
@angular-devkit/build-angular : 17.0.6
@angular-devkit/schematics : 17.0.6
@angular/cli : 17.0.6
@ionic/angular-toolkit : 9.0.0

Capacitor:

Capacitor CLI : 5.5.1
@capacitor/android : 5.5.1
@capacitor/core : 5.5.1
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run (update available: 2.0.0) : 1.7.4

System:

NodeJS : v18.15.0 (/Users/someone/.nvm/versions/node/v18.15.0/bin/node)
npm : 9.5.0
OS : macOS Unknown

[twestrick]

Assuming your Android 8.1 is an emulator?

This error typically happens when the device is running a really old WebView version which doesn’t support modern JavaScript. I found that older emulator devices (like a Pixel 2) are using an integrated Android WebView vs. the new separate Android System WebView (which is installed like a normal app and updates independently from the OS).

So, you could try installing Android System Webview from the Play Store in the emulator.

[ahmadklsany]

yes its emulator
but , I tried this demo on real device (Android 7) same error

[twestrick]

It’s most likely the same reason. An old WebView that doesn’t support JS features your app is using.

[ahmadklsany]

yes its , but what i have to do ? did you have any idea ?
note : this app is demo ionic app from scratch tab demo i am not add any features or any line of code on it .
i found soluaion to change target in tsconfig.json from es2022 to es2015 but i thing it not correct with angular 17 or 16
no soluation yet

[twestrick]

What version of the WebView is installed? Ionic 7 supports >= Chromium 79 (source).

[ahmadklsany]

i can’t understand your question , but i use ionic - angular - capacitor
where is the version of web view ?

What version of the WebView is installed?

[ahmadklsany]

same issue here

Support Android 8 + 9 in Ionic 7 (and Angular 16)

Hi, I recently updated to Ionic 7 and Angular 16. My app should be able to be used on at least Android 8 + 9. While using Angular 15, I had set compilerOptions.target to “ES5” in tsconfig.json. Until Angular 16, it’s not possible to overwrite the compilerOptions.target option, anymore. Internally, the target ES2022 is used: TypeScript compiler options “target” and “useDefineForClassFields” are set to “ES2022” and “false” respectively by the Angular CLI. To control ECMA version and features…

[julio-ionic]

Problems with white screen after splash screen on android 7 and below \ Ionic 7 with Angular

Android emulators use old WebView versions that latest Ionic and Angular don’t support. Ionic 7 supports Android 5.1+ with Chromium 79+ Angular supports “2 most recent major versions”, it’s not very clear what they mean by that, but it’s clear they won’t support old WebView versions. To make apps work in older WebViews, you can change the supported Chrome versions in .browserlistrc file like this: Chrome >=61 ChromeAndroid >=61 Note that you can’t go lower than 61, if you set it to 60 (the …

[kwakwa]

It worked for me after using .browserlistrc file but I now see that my app styling is completely broken, because I had used modern css such as css variables var(–color), custom properties, etc. Does anybody know how to fix that?

[twestrick]

Without more info, it’s hard to know. If you are using Vite, you would need @vitejs/plugin-legacy.