Ionic white screen of death on iOs

Ionic Framework ionic-v3
1

Hi there

My iOS App hangs after the splash screen. It just shows a white screen.

ionic info:

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.18.0
    ionic (Ionic CLI) : 3.18.0

global packages:

    cordova (Cordova CLI) : not installed

local packages:

    @ionic/app-scripts : 3.1.2
    Cordova Platforms  : none
    Ionic Framework    : ionic-angular 3.7.1-201710060319

System:

    ios-deploy : 1.9.2 
    Node       : v8.9.1
    npm        : 5.5.1 
    OS         : macOS Sierra
    Xcode      : Xcode 9.1 Build version 9B55 

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

package.json

{
  "name": "",
  "author": "",
  "homepage": "",
  "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": "4.2.5",
    "@angular/compiler": "4.2.5",
    "@angular/compiler-cli": "4.2.5",
    "@angular/core": "4.2.5",
    "@angular/forms": "4.2.5",
    "@angular/http": "4.2.5",
    "@angular/platform-browser": "4.2.5",
    "@angular/platform-browser-dynamic": "4.2.5",
    "@ionic-native/base64": "4.4.0",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/date-picker": "4.4.0",
    "@ionic-native/fcm": "4.4.0",
    "@ionic-native/in-app-browser": "4.4.0",
    "@ionic-native/photo-viewer": "4.4.0",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/cloud-angular": "0.12.0",
    "@ionic/storage": "1.1.6",
    "@types/crypto-js": "3.1.35",
    "angularfire2": "5.0.0-rc.3",
    "cordova-android": "6.2.3",
    "cordova-ios": "4.5.0",
    "cordova-plugin-add-swift-support": "1.6.1",
    "cordova-plugin-datepicker": "^0.9.3",
    "cordova-plugin-device": "1.1.4",
    "cordova-plugin-fcm": "^2.1.2",
    "cordova-plugin-inappbrowser": "^1.7.1",
    "cordova-plugin-ionic": "^2.0.3",
    "cordova-plugin-splashscreen": "~4.0.1",
    "cordova-plugin-statusbar": "2.2.1",
    "cordova-plugin-whitelist": "1.3.1",
    "crypto-js": "3.1.9-1",
    "firebase": "4.6.0",
    "ionic-angular": "3.7.1-201710060319",
    "ionic-img-viewer": "2.7.3",
    "ionic-plugin-keyboard": "~2.2.1",
    "ionicons": "3.0.0",
    "moment": "2.18.1",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.2",
    "typescript": "2.4.0"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-console",
    "cordova-plugin-device",
    "cordova-plugin-statusbar",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [
    "ios",
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    }
  ],
  "description": "frontend: An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-datepicker": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-whitelist": {},
      "ionic-plugin-keyboard": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-fcm": {}
    },
    "config": {
      "ionic_source_map": "source-map"
    },
    "platforms": [
      "android",
      "ios"
    ]
  }
}

In xcode it shows me the following messages:

<FIRInstanceID/WARNING> Failed to fetch APNS token Error Domain=com.firebase.iid Code=1001 “(null)”

Safari develop tool shows me the following:

53
Screen Shot 2017-11-15 at 21.47.53.png1994×1068 356 KB

It seems that it tries to access the plugin before it was created.

What I have done:

  • Added GoogleService-Info.plist to platforms/ios/project/Resources/Resources. Ionic Pro is currently not copying this file in a right way. So if you use Firebase with ionic you can’t use ionic pro for building.

  • Added APN key to firebase

  • Activated Push notifications and keychain sharing in xcode under capabilities

Any help would be appreciated.

2

Add GoogleService-Info.plist to the root of your project also, so that it is on the same level as src folder

That may not solve your issue, but it is a necessity as far as I know.

3

already done but thanks.

I just don’t understand why cordova.js is loaded after vendor.js?
In my index.html cordova.js is included first.

4

Is your in-app setup wrapped in platform.ready or ionViewDidLoad?

5 
  initializeApp() {
    const authObserver = this.angularAuth.authState.subscribe(user => {
      if (user) {
        this.events.publish('user:login');
        this.rootPage = 'BookIndexPage';
        this.subscribeForPushNotification();
        authObserver.unsubscribe();
      }
      else {
        this.rootPage = 'LoginPage';
        authObserver.unsubscribe();
      }
    },
      error => {
        console.log(error);
        this.rootPage = 'LoginPage';
        authObserver.unsubscribe();
      });

    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

so I use initializeApp first and then call platform.ready

6

Try calling initApp inside platform.ready

7

Good call! The FCM plugin error disappeared.

43
Screen Shot 2017-11-15 at 22.11.43.png1984×768 196 KB

Now I have some new error but atleast it’s in my code and not some plugin related stuff.

1 Like