White Screen of Death Ionic 2 - Andorid 6


#1

Hi
I’ve been playing with Ionic 2 for a while and had reasonable success getting an app on my phone an the generator adding pages etc. I then introduced auth0 with reasonable success but suddenly I found the app would just white screen on my phone (HTC One M8 on Android 6). I tried various starter apps with no joy. I have looked into debugging and the error messages pointed me at the content security and a need for a white-list plugin I have set this up and configured the app as found in a number of stackoverflows. Still all I get is a white screen and nothing. I’ve tried reinstalling node, ionic npm. My only other element that may have changed is Visual Studio updating but I don’t use this for Ionic dev I use VS code.

Ionic 1 apps work fine and the Conference sample works no problem it’s just any app I create my self with the starter templates. I’ve tried removing all the cordova plugins apart from the white-list the same as the conference app but this threw errors relating to the statusbar plugin not being available.

Any help would be much appreciated.


#2

Could you post the package.json contents here?


#3

The package config that works is as follows. All I did was change conference to CRM in the name, description etc.

{
  "name": "ionic-crm-app",
  "description": "Ionic CRM App",
  "license": "Apache-2.0",
  "dependencies": {
    "angular2": "2.0.0-beta.13",
    "es6-shim": "^0.35.0",
    "ionic-angular": "2.0.0-beta.4",
    "ionic-native": "^1.1.0",
    "ionicons": "3.0.0-alpha.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "^0.6.6"
  },
  "devDependencies": {
    "del": "2.2.0",
    "gulp": "3.9.1",
    "gulp-watch": "4.3.5",
    "ionic-gulp-browserify-es2015": "^1.0.2",
    "ionic-gulp-fonts-copy": "^1.0.0",
    "ionic-gulp-html-copy": "^1.0.0",
    "ionic-gulp-sass-build": "^1.0.0",
    "ionic-gulp-scripts-copy": "^1.0.0",
    "run-sequence": "1.1.5"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    {
      "locator": "https://github.com/VersoSolutions/CordovaClipboard",
      "id": "com.verso.cordova.clipboard"
    }
  ],
  "cordovaPlatforms": [
    "android"
  ]
}

One of the ones that doesn’t work is this

{
  "dependencies": {
    "angular2": "2.0.0-beta.13",
    "es6-promise": "3.0.2",
    "es6-shim": "^0.35.0",
    "ionic-angular": "2.0.0-beta.4",
    "ionic-native": "^1.1.0",
    "ionicons": "3.0.0-alpha.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.6.6"
  },
  "devDependencies": {
    "del": "2.2.0",
    "gulp": "3.9.1",
    "gulp-watch": "4.3.5",
    "ionic-gulp-browserify-es2015": "^1.0.2",
    "ionic-gulp-fonts-copy": "^1.0.0",
    "ionic-gulp-html-copy": "^1.0.0",
    "ionic-gulp-sass-build": "^1.0.0",
    "ionic-gulp-scripts-copy": "^1.0.0",
    "run-sequence": "1.1.5"
  },
  "name": "cutepuppypics",
  "description": "cutePuppyPics: An Ionic project",
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    {
      "locator": "https://github.com/VersoSolutions/CordovaClipboard",
      "id": "com.verso.cordova.clipboard"
    }
  ],
  "cordovaPlatforms": [
    "ios",
    "android"
  ]
}

Which is straight from a starter template.

Hope this helps… I’m at a loss completely??

Edit pasted the wrong “Non-Working” one.


#4

Does your app.ts or any other .ts file import all the ionic stuff from ionic-angular

import {Page, etc…} from ‘ionic-angular’???


#5

Also I noticed you’re using angular.beta13. If I remember correctly either beta13 or beta12 had some problems that gave errors with zonejs. I would update to beta15.


#6

Nop it’s prettyr standard

import 'es6-shim';
import {App, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';


@App({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  static get parameters() {
    return [[Platform]];
  }

  constructor(platform) {
    this.rootPage = TabsPage;

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });
  }
}

#7

Do you have this <ion-nav [root]="rootPage"></ion-nav> in your template? Because is not there in the code you posted. Without that you won’t ever be able to go to Tabspage LOL.


#8
import 'es6-shim';
import {App, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';


@App({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  static get parameters() {
    return [[Platform]];
  }

  constructor(platform) {
    this.rootPage = TabsPage;

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });
  }
}

template: '<ion-nav [root]="rootPage"></ion-nav>',

SHould be in the post but it keeps removing it… Probably security??

Strange why that hadn’t pasted but yes it is there. I’m upgrading Zone.Js and angular at the minute see if that helps. Thanks for the input up to now :thumbsup:


#9

I think it’s because you’re supposed to add the preformatted </> at the top of the reply box. Is the symbol next to the 1 key if you’re using an American keyboard.


#10
{
  "dependencies": {
    "angular2": "^2.0.0-beta.15",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.35.0",
    "ionic-angular": "2.0.0-beta.4",
    "ionic-native": "^1.1.1",
    "ionicons": "^3.0.0-alpha.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.6.10"
  },
  "devDependencies": {
    "del": "2.2.0",
    "gulp": "3.9.1",
    "gulp-watch": "4.3.5",
    "ionic-gulp-browserify-typescript": "^1.0.0",
    "ionic-gulp-fonts-copy": "^1.0.0",
    "ionic-gulp-html-copy": "^1.0.0",
    "ionic-gulp-sass-build": "^1.0.0",
    "ionic-gulp-scripts-copy": "^1.0.0"
  },
  "cordovaPlatforms": [
    {
      "platform": "android",
      "locator": "windows"
    }
  ],
  "cordovaPlugins": [
    "cordova-plugin-crosswalk-webview"
  ]
}

this is what mine looks like…


#13

Tried this with an npm install but no joy.

I’ve noticed the app that wrks has a side menu not tabs? I’m on creating a new sidemenu project see how that goes.


#14

delete the node_modules folder and run npm install. Sometimes that does it for me.


#15

OK the plot thickens… A brand new sidemenu project works fine. I’ll try another new tabs project and see what happens with that.


#16

Yep seems to be the tabs projects that do it at the minute?? sidemenu works fine but tabs just shows a white screen.


#17

Try without dashes in the app name. You can try with camel case and see if that works. I believe the debugger output will display that in VSCode.


#18

Well, I get whitescreen on android under 5.0, nobody seems to know why…


#19

Since you are using VS Code, the debugger tool is quite useful. Connect your android device to the computer you are developing on via USB cable. Click on the Debug icon (has a spider on it), if it is your first time running it, you will be prompted to install the Cordova extension from the Marketplace. It is a free extension. Now run:

ionic run android

After app has launched on your device, click on the drop down menu at the top of the left hand pane, and choose Attach to running android on device. Then click on then green play button located just to the left of the drop down. VS Code will attach the real time debugger to your device. You should see the reason for the whitescreen shown in the bottom console pane.

Typically the whitescreen is caused by a syntax issue, or in my case I did have an issue with using hypens in the package name inside config.xml. Be sure you have changed to name correctly there as well.


#20

Hi,
I solved with
cd ionic project folder
ionic platform add android
ionic plugin add cordova-plugin-crosswalk-webview

Android version: 4.1.2


Does IONIC support android 6?
#21

Adding crosswalk solved issue for me too.