White screen when building with --prod and --release

[pablogarciamiranda]

Description:

The app shows a white screen after splash screen and the content never loads. It works perfectly with:

• ionic serve
• ionic cordova run android --device -l -c

But if I create a production build using the following:

• ionic cordova build android --prod --release
• ionic cordova build android --prod

The white screen shows forever.

Output:

My package.json:

{
    "name": "template-simple-apps",
    "version": "0.0.1",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.com/",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/common": "5.0.0",
        "@angular/compiler": "5.0.0",
        "@angular/compiler-cli": "5.0.0",
        "@angular/core": "5.0.0",
        "@angular/forms": "5.0.0",
        "@angular/http": "5.0.0",
        "@angular/platform-browser": "5.0.0",
        "@angular/platform-browser-dynamic": "5.0.0",
        "@ionic-native/camera": "^4.5.2",
        "@ionic-native/core": "4.4.0",
        "@ionic-native/email-composer": "^4.5.2",
        "@ionic-native/file": "^4.5.2",
        "@ionic-native/image-picker": "^4.5.2",
        "@ionic-native/onesignal": "^4.5.2",
        "@ionic-native/splash-screen": "4.3.2",
        "@ionic-native/status-bar": "4.3.2",
        "@ionic/storage": "^2.1.3",
        "cordova-android": "^6.3.0",
        "cordova-ios": "^4.4.0",
        "cordova-plugin-camera": "^3.0.0",
        "cordova-plugin-compat": "^1.2.0",
        "cordova-plugin-device": "^1.1.7",
        "cordova-plugin-ionic-webview": "^1.1.16",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.4.1",
        "cordova-plugin-whitelist": "^1.3.1",
        "cordova-sqlite-storage": "^2.2.0",
        "ionic-angular": "3.9.2",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "onesignal-cordova-plugin": "^2.2.4",
        "rxjs": "5.5.2",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.18"
    },
    "devDependencies": {
        "@angular/cli": "^1.5.5",
        "@ionic/app-scripts": "3.1.7",
        "@ionic/cli-plugin-cordova": "^1.4.1",
        "@ionic/cli-plugin-ionic-angular": "1.4.1",
        "typescript": "^2.6.2",
        "uglify-es": "3.2.2"
    },
    "description": "An Ionic project",
    "cordova": {
        "plugins": {
            "cordova-plugin-device": {},
            "cordova-plugin-ionic-webview": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-camera": {},
            "cordova-sqlite-storage": {},
            "onesignal-cordova-plugin": {}
        },
        "platforms": [
            "android",
            "browser",
            "ios"
        ]
    }
}

My ionic info:

cli packages: (/home/pablo/.nvm/versions/node/v8.9.3/lib/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.0.1 

local packages:

@ionic/app-scripts : 3.1.7
Cordova Platforms  : android 6.2.3 browser 4.1.0
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.0.2
Node              : v8.9.3
npm               : 5.5.1 
OS                : Linux 4.10

Environment Variables:

ANDROID_HOME : /home/pablo/Android/Sdk

Misc:

backend : pro

Other Information:

[pablogarciamiranda]

I have tested it with the Remote Debugging Android Devices tool.
I did know nothing about the existence of that tool and it helped me to find out the error. It was related with the plugin OneSignal which was not installed correctly and there was something missing.

[devdaddy]

can you elaborate on what was not installed correctly?

[HZooly]

Hi @pablogarciamiranda! I would be happy if you could share what was wrong. I'll try on my side with tool you shared.

[matjazonline]

You can also test with 'ionic cordova run browser --prod --relese' and see js errors in console.

[xLarry]

I just ran into the same issue after upgrading @ionic/app-scripts to 3.1.9. The remote console showed something like

ReferenceError: Can't find variable: webpackJsonp

which guided me to the solution, that has been posted here:

Apparently from version 2.0 file /src/index.html have been changed! Body now should look like this - new is file build/vendor.js

<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The vendor js is generated during the build process
       It contains all of the dependencies in node_modules -->
  <script src="build/vendor.js"></script>

  <!-- The main bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>

Adding the <script src="build/vendor.js"></script> to my /src/index.html resolved this for me.