White screen in --prod mode on Android APIs <= 30

ClariSchlari · September 15, 2022, 10:34am

Hello,

I am facing one of the famous “white screen after splash screen” issues. Have been reading and trying around for a week now, but without any success. I sincerely hope that someone can help me!

I am building an Ionic Angular app for Android. If and only if I use the –prod flag for the build (ionic cap build android --prod), the app shows only a white screen after the splash screen on Android sdks <= 30. On higher sdks, everything works fine. I tried this on different emulators as well as physical devices.

If I look at the console in chrome://inspect/#devices, there are no errors shown, and Ionic Native: deviceready event fired after ... ms. The network tab shows that everything is loaded, and the HTML elements are there, but I cannot see anything.

I have the suspicion that it might have to do something with the CSS classes. Occasionally, some elements that should not be hidden have “ion-…-hidden” classes. However, on other occurences, the HTML seems to look exactly like it looks for a device where the app is working.

Here are some things I read about/tried already which had no effect:

I changed the target in the tsconfig.json to es5, as I read that might be necessary for older versions of Android. I am sceptical though because of course at every build the capacitor rightfully complains that it is deprecated.
I created a new blank Ionic Angular project and changed my dependencies to match the ones used there.

Some further ideas:

I read that you might have to include polyfills for Angular to support lower Android sdks, but did not find any concrete examples of what that might look like. (We want to support everything from Android 8.0 upward.)
Do you need to do browser updates on the Android emulators with lower sdks? On the other hand, do you need to support older browsers that come with the older sdks? (I really do not know a lot about browsers.)
Could it be related to the splash screen, or some issue at app launch? I posted the code from the app.component.ts below.
Something with WebView? It appears in the Logcat Errors below.

Any help is greatly appreciated!

app.component.ts:

import { SplashScreen } from ‘@ionic-native/splash-screen/ngx’;

[…]

@Component({
selector: ‘app-root’,
templateUrl: ‘app.component.html’,
styleUrls: [‘app.component.scss’]
})
export class AppComponent {
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private storage: StorageService,
private translate: TranslateService,
) {
this.initializeApp();
}

initializeApp() {
const platformReady = this.platform.ready();
const storageReady = this.storage.ready;
const languageReady = this.setupAppLanguages();

Promise.allSettled([platformReady, storageReady, languageReady])
.then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}

[…]

package.json:

“dependencies”: {
“@angular/animations”: “^14.1.2”,
“@angular/cdk”: “^14.1.2”,
“@angular/common”: “^14.1.2”,
“@angular/core”: “^14.1.2”,
“@angular/flex-layout”: “^14.0.0-beta.40”,
“@angular/forms”: “^14.1.2”,
“@angular/material”: “^14.1.2”,
“@angular/platform-browser”: “^14.1.2”,
“@angular/platform-browser-dynamic”: “^14.1.2”,
“@angular/router”: “^14.1.2”,
“@campuscard/card-webcomponent”: “git+https://bb-git.zedat.fu-berlin.de/CampusCard/card-webcomponent.git”,
“@capacitor/android”: “^4.0.0”,
“@capacitor/camera”: “^4.0.0”,
“@capacitor/core”: “^4.0.0”,
“@capacitor/push-notifications”: “^4.0.0”,
“@ionic-native/core”: “~5.36.0”,
“@ionic-native/splash-screen”: “^5.31.1”,
“@ionic-native/status-bar”: “^5.31.1”,
“@ionic/angular”: “^6.2.2”,
“@ionic/storage”: “^2.3.1”,
“@ngx-translate/core”: “^13.0.0”,
“@ngx-translate/http-loader”: “^6.0.0”,
“ngx-qrcode-svg”: “^2.0.0”,
“rxjs”: “^6.5.0”,
“tslib”: “^2.1.0”,
“zone.js”: “~0.11.4”
},
“devDependencies”: {
“@angular-devkit/build-angular”: “^14.2.1”,
“@angular/cli”: “^14.1.2”,
“@angular/compiler”: “^14.1.2”,
“@angular/compiler-cli”: “^14.1.2”,
“@angular/language-service”: “^14.1.2”,
“@capacitor/cli”: “^4.0.0”,
“@ionic/angular-toolkit”: “^7.0.0”,
“@types/jasmine”: “~3.8.0”,
“@types/jasminewd2”: “~2.0.3”,
“@types/node”: “^12.19.16”,
“codelyzer”: “^6.0.2”,
“jasmine-core”: “~3.8.0”,
“jasmine-spec-reporter”: “~5.0.0”,
“karma”: “~6.3.9”,
“karma-chrome-launcher”: “~3.1.0”,
“karma-coverage”: “^2.0.3”,
“karma-jasmine”: “~4.0.0”,
“karma-jasmine-html-reporter”: “^1.7.0”,
“karma-sonarqube-unit-reporter”: “0.0.23”,
“protractor”: “~7.0.0”,
“sonarqube-scanner”: “^0.1.0”,
“ts-node”: “~8.3.0”,
“tslint”: “^6.1.3”,
“typescript”: “~4.7.4”
},

Android Studio Logcat → Error:

2022-09-12 11:41:43.984 2678-2678/? E/RegisteredServicesCache: Skipping virtual uicc payment app while device does not support multi-sim
2022-09-12 11:41:43.987 2678-2678/? E/RegisteredServicesCache: Next Tag=services
2022-09-12 11:41:43.987 2678-2678/? E/RegisteredServicesCache: 1invalidateCache:WriteServiceStateToFile
2022-09-12 11:41:43.987 2678-2678/? E/RegisteredServicesCache: Writing service state Data Always
2022-09-12 11:41:44.012 1743-2104/? E/ConnectivityService: RemoteException caught trying to send a callback msg for NetworkRequest [ LISTEN id=18, [ Capabilities: INTERNET&NOT_RESTRICTED&TRUSTED&FOREGROUND] ]
2022-09-12 11:41:44.012 1743-2104/? E/ConnectivityService: RemoteException caught trying to send a callback msg for NetworkRequest [ LISTEN id=19, [ Capabilities: INTERNET&NOT_RESTRICTED&TRUSTED&FOREGROUND] ]
2022-09-12 11:41:44.037 2678-2678/? E/RegisteredServicesCache: 3updateStatusOfServices:WriteServiceStateToFile
2022-09-12 11:41:44.037 2678-2678/? E/RegisteredServicesCache: Writing service state Data Always
2022-09-12 11:41:44.042 2678-2678/? E/NfcService: applyRouting -9
2022-09-12 11:41:44.065 2678-3007/? E/BrcmNfcNfa: CE_T4tRegisterAID (): only one wildcard AID can be registered at time.
2022-09-12 11:41:44.065 2678-3007/? E/BrcmNfcNfa: Unable to register AID
2022-09-12 11:41:44.226 617-8107/? E/ACDB-LOADER: Error: ACDB AudProc vol returned = -19
2022-09-12 11:41:44.226 617-8107/? E/ACDB-LOADER: Error: ACDB_CMD_GET_AFE_COMMON_TABLE_SIZE Returned = -19
2022-09-12 11:41:44.226 617-8107/? E/ACDB-LOADER: Error: ACDB AFE returned = -19
2022-09-12 11:41:44.391 2678-2678/? E/RegisteredServicesCache: Skipping virtual uicc payment app while device does not support multi-sim
2022-09-12 11:41:44.392 2678-2678/? E/RegisteredServicesCache: Next Tag=services
2022-09-12 11:41:44.393 2678-2678/? E/RegisteredServicesCache: 1invalidateCache:WriteServiceStateToFile
2022-09-12 11:41:44.393 2678-2678/? E/RegisteredServicesCache: Writing service state Data Always
2022-09-12 11:41:44.398 2678-2678/? E/RegisteredServicesCache: 3updateStatusOfServices:WriteServiceStateToFile
2022-09-12 11:41:44.399 2678-2678/? E/RegisteredServicesCache: Writing service state Data Always
2022-09-12 11:41:44.406 2678-2678/? E/NfcService: applyRouting -9
2022-09-12 11:41:44.412 2678-3007/? E/BrcmNfcNfa: CE_T4tRegisterAID (): only one wildcard AID can be registered at time.
2022-09-12 11:41:44.412 2678-3007/? E/BrcmNfcNfa: Unable to register AID
2022-09-12 11:41:44.483 624-746/? E/ANDR-PERF-MPCTL: Invalid profile no. 0, total profiles 0 only
2022-09-12 11:41:44.700 2601-7184/? E/Volley: [349] BasicNetwork.performRequest: Unexpected response code 429 for https://www.googleapis.com/placesandroid/v1/getPlaceInferenceModelWeights?key=AIzaSyAP-gfH3qvi6vgHZbSYwQ\_XHqV\_mXHhzIk
2022-09-12 11:41:44.985 8181-8181/? E//system/bin/webview_zygote32: failed to make and chown /acct/uid_99002: Permission denied
2022-09-12 11:41:44.985 8181-8181/? E/Zygote: createProcessGroup(99002, 0) failed: Permission denied
2022-09-12 11:41:45.018 8195-8195/? E/asset: setgid: Operation not permitted
2022-09-12 11:41:45.139 8130-8218/berlin.campuscard.mobileapp E/chromium: [ERROR:devtools_http_handler.cc(249)] Cannot start http server for devtools. Stop devtools.
2022-09-12 11:41:45.297 2601-3149/? E/GCM: Missing checkin config file
2022-09-12 11:41:45.374 8130-8163/berlin.campuscard.mobileapp E/FirebaseMessaging: Topic sync or token retrieval failed on hard failure exceptions: java.util.concurrent.ExecutionException: java.io.IOException: AUTHENTICATION_FAILED. Won’t retry the operation.
2022-09-12 11:41:50.508 2633-2641/? E/ReloadingLock: Finalizing LOCKED Token[shortcuts 2022-09-12 11:41:44.238]
2022-09-12 11:41:51.938 624-746/? E/ANDR-PERF-MPCTL: Invalid profile no. 0, total profiles 0 only
2022-09-12 11:41:52.046 4691-8249/? E/ActivityThread: Failed to find provider info for com.motorola.audiomonitor.settings.provider
2022-09-12 11:41:52.054 4691-8252/? E/ActivityThread: Failed to find provider info for com.motorola.audiomonitor.settings.provider
2022-09-12 11:41:52.320 2678-2678/? E/NfcService: screen state android.intent.action.SCREEN_OFF
2022-09-12 11:41:52.321 2678-2678/? E/NfcService: screen state OFF required
2022-09-12 11:41:52.322 2678-2678/? E/NfcService: screen state 1
2022-09-12 11:41:52.322 2678-2678/? E/NfcService: screen state mScreenState 8
2022-09-12 11:41:52.322 2678-2678/? E/BrcmNfcJni: nfcManager_doSetScreenOrPowerState: Enter
2022-09-12 11:41:52.327 2678-8257/? E/NfcService: applyRouting -2
2022-09-12 11:41:52.347 2678-3007/? E/BrcmNfcJni: nfaConnectionCallback: unknown event ???
2022-09-12 11:41:54.450 615-615/? E/WifiHAL: wifi_get_logger_supported_feature_set: Error -3 happened.
2022-09-12 11:41:54.468 1743-2830/? E/BatteryStatsService: no controller energy info supplied

lioneltraore · January 16, 2023, 9:27am

Hello, I have the same issue. Did you resolve yours?

ciccilleju · January 16, 2023, 10:05am

have you seen this?

lioneltraore · January 16, 2023, 1:39pm

Thanks for your reply. I tried what you suggested but I still have a white screen

ciccilleju · January 16, 2023, 4:41pm

do you have anything in your console?
if you inspect the html code, what do you see?

have you tried to add a browserlist file?

.browserslistrc

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# You can see what browsers were selected by your queries by running:
#   npx browserslist


> 0.5%
Chrome >=60
Firefox >=63
Edge >=79
Safari >=13
iOS >=13
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.

julio-ionic · January 17, 2023, 10:29am

As far as I know Angular 15 doesn’t allow to support older browser versions than their defaults, which are very restrictive. (might be a bug in their end or a hard requirement)

You can downgrade to Angular 14 undoing this changes feat(angular): update starters to angular 15 (#1744) · ionic-team/starters@dc48a92 · GitHub

Then the things ciccilleju said should work.

You can also report the problems to Angular team so maybe they reconsider.

Topic		Replies	Views
Problems with white screen after splash screen on android 7 and below \ Ionic 7 with Angular Ionic Angular	5	1777	April 18, 2024
Ionic 6 default project white screen on Android 30 or below when using --prod Ionic Framework	22	8539	October 31, 2022
Only white screen is visible when using --prod with android build ionic-v3	6	6209	January 23, 2018
How to diagnose white screen on startup on Android device ionic-v1	22	7118	March 14, 2017
Ionic 6 - Cordova - stuck on white screen after splash screen - iOS Ionic Angular announcement	8	7275	June 21, 2023

White screen in --prod mode on Android APIs <= 30

app.component.ts:

package.json:

Android Studio Logcat → Error:

Related Topics