All screens are blank in Android if I run app with --prod option

The problem occurs only if I run application with --prod option. All screens are blank now. If I touch the position where an input should be shown, a cursor for typing shows up though. I am using 2.2.0 (2017-03-08)

My Ionic info:

    Your system information:

     ordova CLI: 6.4.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: Not installed
    ios-sim version: Not installed
    OS: Windows 10
    Node Version: v6.2.2
    Xcode version: Not installed

My package.json:

"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.2.1",
    "@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/jquery": "^2.0.39",
    "@types/jquery-mask-plugin": "^1.14.0",
    "angular2-text-mask": "^2.1.0",
    "cordova-plugin-spinnerdialog": "^1.3.2",
    "ionic-angular": "2.2.0",
    "ionic-native": "2.4.1",
    "ionicons": "3.0.0",
    "jquery": "^3.1.1",
    "lodash.assign": "^4.2.0",
    "rxjs": "5.0.1",
    "zone.js": "0.7.2"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.1.4",
    "typescript": "2.0.9"
  }

Any hints?

Thank you!

Hi Cristian!

I’ve got the exact same issue. Did you mange to solve it yet?

Regards,
Eugène

Not yet. In fact, I am trying to solve it right now. I have start a new --v2 ionic app and I am migrating my code to the new app structure. I hope it is solved in the new ionic2 version.

Can you see log or errors from usb device debugging with Android Studio?

Nope. No error logs are shown in console.

Starting a new --v2 Ionic app from scratch and migrating the code did not solve the —prod issue. I don’t know why it looks as though Ionic Team is ignoring this issue.

Could be a problem with some plugin. Try to recreate de project again with command line ionic and add the plugins step by step until you see if you can repeat the error…

Yeah, maybe. I’m gonna give it a try now.

Perhaps you can probe now Ionic Native 3.x

Ionic Native 3.x ? Is this the same as @ionic-native/google-maps ? I am having problem trying to make my old Google Maps implementation to work. But the example given in Ionic Documenta simply doesn’t work. There’s no “create” method in GoogleMaps object, as it is stated in the code example from https://ionicframework.com/docs/v2/native/google-maps/:

 // create a new map by passing HTMLElement
 let element: HTMLElement = document.getElementById('map');

 let map: GoogleMap = GoogleMaps.create(element);

Removing and adding the plugins again (one by one) and then removing and adding android platform did not solve the --prod issue either.

Sorry that you cant not solve this.

I use google maps in Ionic 2 as api gooogle maps javascript and not as plugin.

https://www.joshmorony.com/creating-an-advanced-google-maps-component-in-ionic-2/

1 Like

Thank yout! I am gonna give it a try.

I have finally found the answer to my problem. In fact, the answer was this post: Ionic app show blank screen on android device (4.4.4) after splash screen I have added new color variables to my variables.scss file and when I run --prod build all screens get blank. Now I need to know how to add my new color variables.

Thanks! But even with the default variables.scss file with no additional colours added I get the blank screen after startup. Were you able to fix it this way?

Yes Yuyinitos! My problem was the additional color variables in variables.scss file. BTW, here’s my Ionic Info:

Your system information:

 ordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.2.2
Xcode version: Not installed

And here is my packages.json:

 "dependencies": {
    "@angular/common": "2.2.1",
    "@angular/compiler": "2.2.1",
    "@angular/compiler-cli": "2.2.1",
    "@angular/core": "2.2.1",
    "@angular/forms": "2.2.1",
    "@angular/http": "2.2.1",
    "@angular/platform-browser": "2.2.1",
    "@angular/platform-browser-dynamic": "2.2.1",
    "@angular/platform-server": "2.2.1",
    "@ionic/storage": "1.1.6",
    "@types/jquery": "^2.0.39",
    "@types/jquery-mask-plugin": "^1.14.0",
    "angular2-text-mask": "^2.1.0",
    "cordova-plugin-spinnerdialog": "^1.3.2",
    "ionic-angular": "2.0.0-rc.4",
    "ionic-native": "2.2.11",
    "ionic2-input-mask": "^0.18.6",
    "ionicons": "3.0.0",
    "jquery": "^3.1.1",
    "lodash.assign": "^4.2.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.0.0",
    "typescript": "2.0.9"
  }

Fixing the variables.scss doesn’t seem to work for me unfortunately.

My system info:

Cordova CLI: 6.4.0 
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: 1.9.0 
ios-sim version: 5.0.8 
OS: macOS Sierra
Node Version: v6.2.0
Xcode version: Xcode 8.2.1 Build version 8C1002

Package.json

  "dependencies": {
    "@angular/common": "^2.4.10",
    "@angular/compiler": "^2.4.10",
    "@angular/compiler-cli": "^2.4.10",
    "@angular/core": "^2.4.10",
    "@angular/forms": "^2.4.10",
    "@angular/http": "^2.4.10",
    "@angular/platform-browser": "^2.4.10",
    "@angular/platform-browser-dynamic": "^2.4.10",
    "@angular/platform-server": "^2.4.10",
    "@ionic/app-scripts": "^1.1.4",
    "@ionic/cloud-angular": "^0.11.0",
    "@ionic/storage": "^2.0.1",
    "@types/meteor": "^1.4.1",
    "accounts-base-client-side": "^0.1.1",
    "accounts-facebook-client-side": "^1.0.9",
    "accounts-password-client-side": "^1.3.5",
    "angular2-moment": "^1.3.3",
    "ionic-angular": "^2.3.0",
    "ionic-native": "^2.9.0",
    "ionicons": "3.0.0",
    "meteor-client-side": "^1.3.5",
    "meteor-rxjs": "^0.4.7",
    "meteor-typings": "^1.3.1",
    "moment": "^2.18.1",
    "ng2-translate": "^5.0.0",
    "rxjs": "^5.2.0",
    "sw-toolbox": "^3.6.0",
    "typescript": "^2.2.1",
    "zone": "^0.3.4",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.0.0",
    "lodash.camelcase": "^4.3.0",
    "lodash.upperfirst": "^4.3.1",
    "typescript": "2.0.9",
    "typescript-extends": "^1.0.1"

Sorry that you can’t solve this. Anyway, there’s an open issue related to many SASS variables in https://github.com/driftyco/ionic/issues/9465