Ionic-app-scripts: Whithe screen problem

[brandyscarney]

_From @BeliliFahem on March 24, 2017 12:11_

Ionic version:
[ ] 1.x
[ x] 2.x (2.3.0)

I'm submitting a ...
[ x] bug report
[ ] feature request

Current behavior:

• My application show whithe screen in device when i run with " --prod" (ionic run android --prod --device)

• My application work fine

  • in my desktop google chrome

  • in my device when i run/build without " --prod' (ionic run android --device)

Steps to reproduce:

1. update to ionic 2.3.0 with package.json below
2. run the application in your device with this usal command : ionic run android --prod --device

Run with " --prod" to reduce the applciation size and the app startup time.

Related code: package.json

{
  "name": "xxxxxxxxxxxxxx",
  "author": "xxxxxxxxx",
  "homepage": "xxxxxxxxxxxxxx",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve",
    "test": "karma start ./test-config/karma.conf.js"
  },
  "config": {
    "ionic_copy": "./config/copy.config.js"
  },
  "dependencies": {
    "@angular/common": "2.4.8",
    "@angular/compiler": "2.4.8",
    "@angular/compiler-cli": "2.4.8",
    "@angular/core": "2.4.8",
    "@angular/forms": "2.4.8",
    "@angular/http": "2.4.8",
    "@angular/platform-browser": "2.4.8",
    "@angular/platform-browser-dynamic": "2.4.8",
    "@angular/platform-server": "2.4.8",
    "@ionic/storage": "2.0.0",
    "@types/crypto-js": "3.1.32",
    "@types/google-maps": "3.2.0",
    "angular2-google-maps": "0.16.0",
    "crypto-js": "3.1.9-1",
    "font-awesome": "4.7.0",
    "google-libphonenumber": "2.0.4",
    "ionic-angular": "2.3.0",
    "ionic-native": "2.4.1",
    "ionicons": "3.0.0",
    "moment": "2.17.1",
    "ng2-translate": "5.0.0",
    "rxjs": "5.0.1",
    "zone.js": "0.7.2"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.1.4",
    "@types/google-maps": "3.2.0",
    "@types/googlemaps": "3.26.1",
    "sw-toolbox": "3.4.0",
    "typescript": "2.0.9"
  },
  "description": "HapiCare Patient. Premier Protail patient multiplateforme",
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "cordova-plugin-nativestorage",
    "cordova-plugin-datepicker",
    "cordova-plugin-network-information",
    "cordova-plugin-app-version",
    "cordova-plugin-x-toast",
    "cordova-plugin-globalization",
    "cordova-plugin-email",
    "de.appplant.cordova.plugin.local-notification",
    "cordova-plugin-calendar",
    "uk.co.workingedge.phonegap.plugin.launchnavigator",
    "cordova-plugin-geolocation",
    "org.loicknuchel.cordova.deviceaccounts"
  ],
  "cordovaPlatforms": [
    "android",
    "ios",
    "windows"
  ]
}

Ionic info: :

Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.4

_Copied from original issue: driftyco/ionic#10906_

[themastersoda]

@BeliliFahem what does device console say while on white screen? Are there any errors inspecting through Chrome dev tools?

[BeliliFahem]

@themastersoda
There is no error on the console.

[pika11]

I'm having the same trouble there is no console error log and when using chrome://inspect the html elements are there and all services are running as intended but everything is white.

This only happens when the project is build with the --prod flag

Ionic Info

Cordova CLI: 6.5.0
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: 1.9.0
ios-sim version: 5.0.10
OS: macOS Sierra
Node Version: v6.3.0
Xcode version: Xcode 8.2.1 Build version 8C1002

package.json

{
"name": "ionic-hello-world",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"@angular/common": "2.4.8",
"@angular/compiler": "2.4.8",
"@angular/compiler-cli": "2.4.8",
"@angular/core": "2.4.8",
"@angular/forms": "2.4.8",
"@angular/http": "2.4.8",
"@angular/platform-browser": "2.4.8",
"@angular/platform-browser-dynamic": "2.4.8",
"@angular/platform-server": "2.4.8",
"@ionic/storage": "2.0.0",
"ionic-angular": "2.2.0",
"ionic-native": "2.4.1",
"ionicons": "3.0.0",
"rxjs": "5.0.1",
"sw-toolbox": "3.4.0",
"zone.js": "0.7.2"
},
"devDependencies": {
"@ionic/app-scripts": "1.1.4",
"typescript": "2.0.9"
},
"cordovaPlugins": [
"ionic-plugin-keyboard",
"cordova-plugin-whitelist",
"cordova-plugin-console",
"cordova-plugin-statusbar",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"cordova-sqlite-storage",
{
"id": "cordova-plugin-facebook4",
"locator": "cordova-plugin-facebook4",
"variables": {
"APP_ID": "1618086795159014",
"APP_NAME": "dondecomemos"
}
},
"cordova-plugin-code-push",
"code-push",
"cordova-plugin-file",
"cordova-plugin-compat",
"cordova-plugin-file-transfer",
"cordova-plugin-zip",
"cordova-plugin-dialogs",
"onesignal-cordova-plugin",
"cordova.plugins.diagnostic",
"cordova-plugin-geolocation"
],
"cordovaPlatforms": [
"ios",
{
"platform": "ios",
"version": "",
"locator": "ios"
},
{
"platform": "android",
"version": "",
"locator": "android"
}
],
"description": "dondecomemosIonic: An Ionic project"
}

[SuperBinlin]

+1

[battika]

+1

[abomadi]

you are not seeing any error in console because webpack config file does not log or show the errors in ionic-app-scripts check this PR https://github.com/driftyco/ionic-app-scripts/pull/871 it might help showing if there is any error

[BeliliFahem]

The problem is not solved even after updating

Ionic info

`
@ ionic/cli-utils : 1.3.0
You have been opted out of telemetry. To change this, run: cordova telemetry on. 7.0.1
Ionic CLI : 3.3.0

local packages:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.3.0
@ionic/cli-plugin-ionic-angular : 1.3.0
Cordova Platforms               : You have been opted out of telemetry. To change this, run: cordova telemetry on.  android 6.2.3 browser 4.1.0
Ionic Framework                 : ionic-angular 3.3.0

System:

Node       : v6.10.3
OS         : Windows 10
Xcode      : not installed
ios-deploy : not installed
ios-sim    : not installed

`

[cnpallares]

+1

[SuperBinlin]

http://www.jianshu.com/p/8e73c899217f

[labrada83]

Did anyone solve it? I'm dealing with the same issue

[kensodemann]

Can you post some sample code via GitHub or StackBlitz that demonstrates the issue?