Ionic 3: Build with "--prod" results in white screen

[svzi]

Description: When I build my Ionic 3 app (for Android) with "--prod" flag, the app starts as usual. Showing the splash screen and right after that a white screens. Nothing more happens thereafter, no matter how long you wait.

As soon as I remove the "--prod" flag, everything works as expected.

Output: The system log doesn't show any errors:

 I  [INFO:library_loader_hooks.cc(36)] Chromium logging enabled: level = 0, default verbosity = 0
 E  [ERROR:devtools_http_handler.cc(292)] Cannot start http server for devtools. Stop devtools.
 I  [INFO:CONSOLE(1)] "Ionic Pro initializing (app id: %cXYZ%c)", source: http://localhost:8080/build/vendor.js (1)
 I  [INFO:CONSOLE(1)] "Ionic Native: deviceready event fired after 514 ms", source: http://localhost:8080/build/vendor.js (1)
 I  [INFO:CONSOLE(814)] "This function has been deprecated in favor of IonicCordova.getAppDetails.", source: http://localhost:8080/plugins/cordova-plugin-ionic/dist/common.js (814)

This is my package.json:

{
  "name": "xxx",
  "version": "0.1.0",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build --prod --aot",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve",
    "test": "jest"
  },
  "jest": {
    "transform": {
      "^.+\\.tsx?$": "ts-jest"
    },
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "json"
    ]
  },
  "dependencies": {
    "@angular/animations": "5.2.9",
    "@angular/common": "5.2.9",
    "@angular/compiler": "5.2.9",
    "@angular/compiler-cli": "5.2.9",
    "@angular/core": "5.2.9",
    "@angular/forms": "5.2.9",
    "@angular/http": "5.2.9",
    "@angular/platform-browser": "5.2.9",
    "@angular/platform-browser-dynamic": "5.2.9",
    "@ionic-native/base64": "^4.6.0",
    "@ionic-native/browser-tab": "^4.7.0",
    "@ionic-native/call-number": "^4.7.0",
    "@ionic-native/core": "4.6.0",
    "@ionic-native/diagnostic": "^4.7.0",
    "@ionic-native/dialogs": "^4.7.0",
    "@ionic-native/email-composer": "^4.7.0",
    "@ionic-native/file": "^4.7.0",
    "@ionic-native/geolocation": "^4.6.0",
    "@ionic-native/in-app-browser": "^4.7.0",
    "@ionic-native/native-geocoder": "^4.7.0",
    "@ionic-native/native-page-transitions": "^4.7.0",
    "@ionic-native/native-storage": "^4.7.0",
    "@ionic-native/network": "^4.7.0",
    "@ionic-native/splash-screen": "4.6.0",
    "@ionic-native/status-bar": "4.6.0",
    "@ionic/app-scripts": "^3.1.8",
    "@ionic/pro": "^2.0.3",
    "@ionic/storage": "^2.1.3",
    "@types/chartjs": "0.0.31",
    "call-number": "^1.0.1",
    "chart.js": "^2.7.2",
    "com-badrit-base64": "^0.2.0",
    "com.telerik.plugins.nativepagetransitions": "^0.6.5",
    "cordova-android": "~7.0.0",
    "cordova-plugin-browsertab": "^0.2.0",
    "cordova-plugin-compat": "^1.2.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-dialogs": "^2.0.1",
    "cordova-plugin-email-composer": "^0.8.15",
    "cordova-plugin-file": "^6.0.1",
    "cordova-plugin-geolocation": "^4.0.1",
    "cordova-plugin-inappbrowser": "^3.0.0",
    "cordova-plugin-ionic": "^5.0.0",
    "cordova-plugin-ionic-keyboard": "^2.1.2",
    "cordova-plugin-ionic-webview": "^2.0.1",
    "cordova-plugin-nativegeocoder": "^3.1.1",
    "cordova-plugin-nativestorage": "^2.3.2",
    "cordova-plugin-network-information": "^2.0.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-sqlite-storage": "^2.3.2",
    "cordova.plugins.diagnostic": "^4.0.8",
    "firebase": "4.8.0",
    "font-awesome": "4.7.0",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "moment": "^2.22.2",
    "mx.ferreyra.callnumber": "~0.0.2",
    "ng4-charts": "^1.0.2",
    "ngx-moment": "^3.0.0",
    "rxjs": "5.5.8",
    "sw-toolbox": "3.6.0",
    "underscore": "^1.8.3",
    "weathericons": "^2.1.0",
    "zone.js": "0.8.20"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.8",
    "@types/jest": "^23.0.0",
    "jest": "^23.1.0",
    "lint-staged": "^7.0.3",
    "prettier": "^1.11.1",
    "reflect-metadata": "^0.1.12",
    "ts-jest": "^22.4.6",
    "tslint": "^5.9.1",
    "tslint-config-prettier": "^1.10.0",
    "tslint-eslint-rules": "^5.1.0",
    "typescript": "~2.6.2"
  },
  "lint-staged": {
    "*.ts": [
      "prettier --parser typescript --write --single-quote --trailing-comma es5 --tab-width 4 --print-width 120",
      "git add"
    ]
  },
  "config": {
    "ionic_copy": "./scripts/copy-custom-libs.js"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-geolocation": {
        "GEOLOCATION_USAGE_DESCRIPTION": "To get location based informations like weather"
      },
      "cordova-plugin-dialogs": {},
      "com-badrit-base64": {},
      "cordova-plugin-nativegeocoder": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-browsertab": {},
      "cordova-sqlite-storage": {},
      "cordova-plugin-network-information": {},
      "com.telerik.plugins.nativepagetransitions": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-statusbar": {},
      "cordova.plugins.diagnostic": {},
      "mx.ferreyra.callnumber": {},
      "cordova-plugin-email-composer": {},
      "cordova-plugin-file": {},
      "cordova-plugin-nativestorage": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic": {
        "APP_ID": "xxxx",
        "CHANNEL_NAME": "Master",
        "UPDATE_METHOD": "none",
        "WARN_DEBUG": "true",
        "UPDATE_API": "https://api.ionicjs.com",
        "MAX_STORE": "2",
        "MIN_BACKGROUND_DURATION": "30"
      }
    },
    "platforms": [
      "android"
    ]
  }
}

My ionic info:

Ionic:

   ionic (Ionic CLI)  : 4.0.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.1.11

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0

System:

   Android SDK Tools : 26.1.1
   NodeJS            : v8.10.0 (/usr/bin/node)
   npm               : 3.5.2
   OS                : Linux 4.15

Environment:

   ANDROID_HOME : /home/svzi/Android/Sdk

Other Information: At first I thought it could have something to do with Ionic Deploy (https://forum.ionicframework.com/t/app-hangs-on-startup-if-no-snapshot-update-available/135641/4), but it looks like I was wrong about.

Any help would be really much appreciated! I need to deliver a production ready build as soon as possible!

Best, Sven

[imhoffd]

@svzi You may need to inspect the Web View console logs for errors. If you see the "white screen of death" it means there's a problem in HTML/JS/CSS land. See our docs for instructions: https://beta.ionicframework.com/docs/building/android#using-chrome-devtools-to-debug

[svzi]

@dwieeb That's pretty awesome, you were absolutely right about that. I simply forgot to copy a custom lib to the build folder that I recently added to my index.html. After fixing that, everything works as expected. Thanks for pointing me in the right direction, as I wasn't aware that this piece of log was missing in the device logs.

[imhoffd]

Awesome! Great to hear! 🍻