Ionic white screen on ios startup


#1

When i start my ios app on simulator/device, it shows me my splash screen and then just a white screen.
But when i reload the app in the safari dev inspector the app loads fine. I don’t receive any errors in the console.

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) : 7.1.0 

local packages:

    @ionic/app-scripts : 3.1.2
    Cordova Platforms  : ios 4.5.3
    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

config.xml:

<?xml version='1.0' encoding='utf-8'?>
<widget id="" version="0.0.7" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name></name>
    <description></description>
    <author email="" href=""></author>
    <content src="index.html" />
    <access origin="*" />
    <allow-navigation href="http://*/*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
        <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
        <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
        <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
        <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
        <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
        <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
        <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
        <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
        <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
        <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
        <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
        <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
        <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
        <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
        <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
        <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
        <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <icon height="57" src="resources/ios/icon/icon.png" width="57" />
        <icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
        <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
        <icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
        <icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
        <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
        <icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
        <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
        <icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
        <icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
        <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
        <icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
        <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
        <icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
        <icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
        <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
        <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
        <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
        <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
        <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
        <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
        <splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
        <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
        <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
        <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
        <splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
    </platform>
    <preference name="loadUrlTimeoutValue" value="700000" />
    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="android-minSdkVersion" value="16" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="StatusBarStyle" value="default" />
    <preference name="SplashScreen" value="screen" />
    <preference name="orientation" value="default" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreenDuration" value="300" />
    <preference name="ShowSplashScreenSpinner" value="false" />
    <preference name="AutoHideSplashScreen" value="false" />
    <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
    <preference name="SplashScreenDelay" value="3000" />
    <plugin name="cordova-plugin-datepicker" spec="^0.9.3" />
    <plugin name="cordova-plugin-device" spec="1.1.4" />
    <plugin name="cordova-plugin-splashscreen" spec="4.1.0" />
    <plugin name="cordova-plugin-statusbar" spec="2.2.1" />
    <plugin name="cordova-plugin-whitelist" spec="1.3.1" />
    <plugin name="ionic-plugin-keyboard" spec="~2.2.1" />
    <plugin name="cordova-plugin-inappbrowser" spec="^1.7.1" />
    <plugin name="cordova-plugin-fcm" spec="2.1.2" />
    <engine name="android" spec="6.2.3" />
    <engine name="ios" spec="4.5.3" />
</widget>

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.4.4",
    "@angular/compiler": "4.4.4",
    "@angular/compiler-cli": "4.4.4",
    "@angular/core": "4.4.4",
    "@angular/forms": "4.4.4",
    "@angular/http": "4.4.4",
    "@angular/platform-browser": "4.4.4",
    "@angular/platform-browser-dynamic": "4.4.4",
    "@ionic-native/base64": "4.3.3",
    "@ionic-native/core": "4.3.3",
    "@ionic-native/date-picker": "4.3.3",
    "@ionic-native/fcm": "4.3.3",
    "@ionic-native/in-app-browser": "4.3.3",
    "@ionic-native/photo-viewer": "4.3.3",
    "@ionic-native/splash-screen": "4.3.3",
    "@ionic-native/status-bar": "4.3.3",
    "@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.3",
    "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.1.0",
    "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 my app.components.ts i have the function platformReady():

  platformReady() {
    // Call any initial plugins when ready
    this.platform.ready().then(() => {
      console.log("5");
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      this.registerForPushToken();
    });
  }

I tracked the steps in the app.components.ts and I receive all the console.logs so it does execute the code here. If I inspect the element in the safari inspector it shows me the index.html. But the title of this index.html is login. The login page is the one which should be displayed.
It feels like the content is not rendered.

My xcode log:

2017-11-16 19:10:54.022691+0100 kidesia[26696:560030] WARNING: Firebase Analytics App Delegate Proxy is disabled. To log deep link campaigns manually, call the methods in FIRAnalytics+AppDelegate.h.
2017-11-16 19:10:54.126738+0100 kidesia[26696:560030] Apache Cordova native platform version 4.5.3 is starting.
2017-11-16 19:10:54.127207+0100 kidesia[26696:560030] Multi-tasking -> Device: YES, App: YES
2017-11-16 19:10:54.385930+0100 kidesia[26696:560030] [MC] Lazy loading NSBundle MobileCoreServices.framework
2017-11-16 19:10:54.386908+0100 kidesia[26696:560030] [MC] Loaded MobileCoreServices.framework
2017-11-16 19:10:54.388333+0100 kidesia[26696:560030] [MC] System group container for systemgroup.com.apple.configurationprofiles path is /Users/timon/Library/Developer/CoreSimulator/Devices/5653F4C1-9611-4D85-A0FD-808B1F2EC147/data/Containers/Shared/SystemGroup/systemgroup.com.apple.configurationprofiles
2017-11-16 19:10:54.393512+0100 kidesia[26696:560030] Using UIWebView
2017-11-16 19:10:54.395835+0100 kidesia[26696:560030] [CDVTimer][console] 0.079989ms
2017-11-16 19:10:54.396278+0100 kidesia[26696:560030] [CDVTimer][handleopenurl] 0.200033ms
2017-11-16 19:10:54.398206+0100 kidesia[26696:560030] [CDVTimer][intentandnavigationfilter] 1.796007ms
2017-11-16 19:10:54.398447+0100 kidesia[26696:560030] [CDVTimer][gesturehandler] 0.062943ms
2017-11-16 19:10:54.453532+0100 kidesia[26696:560030] [CDVTimer][splashscreen] 54.723024ms
2017-11-16 19:10:54.461819+0100 kidesia[26696:560030] [CDVTimer][statusbar] 7.143021ms
2017-11-16 19:10:54.466386+0100 kidesia[26696:560030] [CDVTimer][keyboard] 3.592014ms
2017-11-16 19:10:54.466870+0100 kidesia[26696:560030] [CDVTimer][TotalPluginStartup] 71.162999ms
2017-11-16 19:10:54.502773+0100 kidesia[26696:560030] DidFinishLaunchingWithOptions
2017-11-16 19:10:54.526: <FIRMessaging/INFO> FIRMessaging library version 1.2.0
2017-11-16 19:10:54.543735+0100 kidesia[26696:560086] [Firebase/Core][I-COR000001] Configuring the default app.
2017-11-16 19:10:54.548: <FIRInstanceID/WARNING> Failed to fetch APNS token Error Domain=com.firebase.iid Code=1001 "(null)"
2017-11-16 19:10:54.553 kidesia[26696] <Debug> [Firebase/Core][I-COR000001] Configuring the default app.
2017-11-16 19:10:54.588554+0100 kidesia[26696:560030] app become active
2017-11-16 19:10:55.060502+0100 kidesia[26696:560030] Resetting plugins due to page load.
2017-11-16 19:10:55.206260+0100 kidesia[26696:560099] TIC Read Status [1:0x0]: 1:57
2017-11-16 19:10:55.206380+0100 kidesia[26696:560099] TIC Read Status [1:0x0]: 1:57
2017-11-16 19:10:55.275264+0100 kidesia[26696:560030] Connected to FCM.
2017-11-16 19:10:55.329107+0100 kidesia[26696:560084] [Firebase/Core][I-COR000019] Clearcut post completed.
2017-11-16 19:10:55.330 kidesia[26696] <Debug> [Firebase/Core][I-COR000019] Clearcut post completed.
2017-11-16 19:10:55.378573+0100 kidesia[26696:560086] <FIRAnalytics/INFO> Firebase Analytics v.3403000 started
2017-11-16 19:10:55.401 kidesia[26696:] <FIRAnalytics/INFO> Firebase Analytics v.3403000 started
2017-11-16 19:10:55.411246+0100 kidesia[26696:560086] <FIRAnalytics/INFO> To enable debug logging set the following application argument: -FIRAnalyticsDebugEnabled (see http://goo.gl/Y0Yjwu)
2017-11-16 19:10:55.414 kidesia[26696:] <FIRAnalytics/INFO> To enable debug logging set the following application argument: -FIRAnalyticsDebugEnabled (see http://goo.gl/Y0Yjwu)
2017-11-16 19:10:55.563229+0100 kidesia[26696:560099] <FIRAnalytics/INFO> Firebase Analytics enabled
2017-11-16 19:10:55.563 kidesia[26696:] <FIRAnalytics/INFO> Firebase Analytics enabled
2017-11-16 19:10:55.565351+0100 kidesia[26696:560085] [MC] Reading from private effective user settings.
2017-11-16 19:10:55.764958+0100 kidesia[26696:560102] TIC Read Status [3:0x0]: 1:57
2017-11-16 19:10:55.765138+0100 kidesia[26696:560102] TIC Read Status [3:0x0]: 1:57
2017-11-16 19:10:56.006741+0100 kidesia[26696:560086] TIC Read Status [4:0x0]: 1:57
2017-11-16 19:10:56.006857+0100 kidesia[26696:560086] TIC Read Status [4:0x0]: 1:57
2017-11-16 19:10:56.194682+0100 kidesia[26696:560030] Finished load of: file:///Users/timon/Library/Developer/CoreSimulator/Devices/5653F4C1-9611-4D85-A0FD-808B1F2EC147/data/Containers/Bundle/Application/673BD496-4629-48D0-B680-D133AA8D4970/kidesia.app/www/index.html
2017-11-16 19:10:56.205963+0100 kidesia[26696:560030] Cordova view ready
2017-11-16 19:10:56.249288+0100 kidesia[26696:560030] FCMPlugin.js: is created
2017-11-16 19:10:56.249429+0100 kidesia[26696:560030] FCMPlugin Ready OK
2017-11-16 19:10:56.249630+0100 kidesia[26696:560030] Ionic Native: deviceready event fired after 337 ms
2017-11-16 19:10:56.249913+0100 kidesia[26696:560030] DEVICE READY FIRED AFTER 231 ms
2017-11-16 19:10:56.250047+0100 kidesia[26696:560030] DEVICE READY FIRED AFTER 182 ms
2017-11-16 19:10:56.250145+0100 kidesia[26696:560030] 5
2017-11-16 19:10:56.250766+0100 kidesia[26696:560030] 6
2017-11-16 19:10:56.250877+0100 kidesia[26696:560030] 7
2017-11-16 19:10:56.251050+0100 kidesia[26696:560030] get Token

I build my app with ionic cordova build ios --prod --release --verbose and I don’t receive any errors/warnings. The error also happens if i build without --prod --release --verbose.

Any help would be appreciated!


#2

You know, I’ve never actually used FCM because I found it too difficult to figure out all the bugs! I’ve consistently used Firebase as a database and onesignal for push notifications


#3

Not sure if this is the same thing, but I had a similar problem after I upgraded everything to Ionic 3.

Turns out I had to add this line to the index.html file head tag:

 <script src="build/vendor.js"></script> 

Once I did that the white screen turned back into my normal app.