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

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