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

I am currently creating a project with ionic and angular. To create it I use the command “ionic start”, I select the angular framework, I add tabs to the project and when I run it in android 7 and earlier versions, I have a white screen error after the splash.

The project only runs on android 10 or later versions.

I have run the project on android studio emulators and on real devices, in both cases I have the same white screen error.

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 minimum supported by Capacitor), Angular CLI will complain.

Then you’ll need two polyfills to make Ionic 7 work, install them with npm install array-flat-polyfill globalthis
And then in the src/polyfills.ts file, add them like this:

import 'globalthis/auto';
import 'array-flat-polyfill';

This will make the white screen go away, but there could still be issues since you are running the app in unsupported Ionic/Angular chromium versions.

On the real devices you should be able to update the System WebView “app” on Android 5-6 or Chrome on Android 7-9 to not need those workarounds.

Thank you!

That solved my problem

How I can update WebView on the real devices or how better say user about it?

You can’t, only users can update their own WebView.

The only thing you can do is to use the server.errorPath config option to load a simpler html page that tells users they need to update or something else