white screen after splash screen in production build

Question

I am using Ionic 3 and I tried everything but yet I keep getting permanent white screen after splash.

ionic info:

@ionic/cli-plugin-cordova       : 1.6.2
@ionic/cli-plugin-ionic-angular : 1.4.0
@ionic/cli-utils                : 1.7.0
ionic (Ionic CLI)               : 3.7.0

Cordova CLI : 7.0.1
@ionic/app-scripts : 2.1.4

config.xml:

<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" />

package.json:

"dependencies": {
    "@angular/animations": "4.1.3",
    "@angular/common": "4.1.3",
    "@angular/compiler": "4.1.3",
    "@angular/compiler-cli": "4.1.3",
    "@angular/core": "4.1.3",
    "@angular/forms": "4.1.3",
    "@angular/http": "4.1.3",
    "@angular/platform-browser": "4.1.3",
    "@angular/platform-browser-dynamic": "4.1.3",
    "@angular/platform-server": "4.1.3",
    "@ionic-native/camera": "3.12.1",
    "@ionic-native/contacts": "3.12.1",
    "@ionic-native/core": "3.12.1",
    "@ionic-native/crop": "^3.12.1",
    "@ionic-native/facebook": "3.12.1",
    "@ionic-native/file": "3.12.1",
    "@ionic-native/file-opener": "^4.1.0",
    "@ionic-native/image-picker": "^3.12.1",
    "@ionic-native/keyboard": "3.12.1",
    "@ionic-native/network": "3.12.1",
    "@ionic-native/splash-screen": "3.12.1",
    "@ionic-native/transfer": "3.12.1",
    "@ionic/cloud-angular": "^0.9.1",
    "@ionic/storage": "2.0.1",
    "@types/node": "^7.0.14",
    "angular-svg-round-progressbar": "^1.1.0",
    "angular2-elastic": "^0.13.0",
    "angular2-elastic-input": "^1.1.1",
    "font-awesome": "^4.7.0",
    "ionic-angular": "^3.6.0",
    "ionicons": "3.0.0",
    "lodash": "^4.17.4",
    "moment": "^2.18.1",
    "ng2-truncate": "^1.3.5",
    "rxjs": "5.1.1",
    "socket.io-client": "^1.7.3",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.12",
    "cordova-ios": "4.3.1",
    "cordova-android": "~6.1.2",
},

I am also hiding splash screen manually in app.component.ts. I also tried this answer https://stackoverflow.com/a/41631799/7266219 but none seems to be working

app.component.ts:

constructor(
  public platform: Platform,
  public storage: Storage,
  public local: Local,
  public menu: MenuController,
  public con: ConnectivityService,
  public events: Events,
  private Splashscreen: SplashScreen
) { this.platformReady(); }

platformReady() {
this.platform.ready().then(() => {
  setTimeout(() => {
    this.Splashscreen.hide();
  }, 100);
  this.listenToLoginEvents();
  this.addConnectivityListener();
  this.rootPage = "FrontPage";
});

}

the function addConnectivityListener() calls a method of a service for watching network activities and listenToLoginEvents() watching login/logout events

updated... also ChromeDev does not display any errors, it shows the duration took for ready device, and also the first page loads..but white screen — Yasir, Aug 22 '17 at 17:40
Could you please add some `console.log(...)` to see until which line of code the app is able to execute? — sebaferreras, Aug 22 '17 at 19:42
@Sampath no console error on the device... as I said it consoles ready device , and consoles `ionViewDidLoad` of the first page but white screen. @sebaferreras where do I console log !? do you mean the `app.component.ts` — Yasir, Aug 23 '17 at 04:00
Yes, check whether after whcih line your app brakes using `consol.log` on your `componet.ts`. — Sampath, Aug 23 '17 at 04:03
everything seems to work fine... all console logs are executed before, during and after `this.platformReady()`, no errors are thrown ... I really dont know what else to do. — Yasir, Aug 23 '17 at 04:44
@Sampath I tried updating everything again,, but still whiteScreen.. The page loads..and even though I don't see the buttons/input fields , clicking on them works (e.g keyboard appears when clicking on input field) — Yasir, Aug 23 '17 at 05:19
Can you remove both `node_modules` folder and `platforms` folder and try it from scratch? — Sampath, Aug 23 '17 at 05:39
Can you create a brand new project in the new folder and check whether what will be the result? — Sampath, Aug 23 '17 at 06:27
@Sampath its working fine with fresh new project... I tried matching preferences with my current project, but didn't work... there is also a folder created called `.sourcemap` in my current project after `build prod finished`.. couldn't locate where the problem occurs :( — Yasir, Aug 23 '17 at 08:07
Hope you can `copy/paste` component by component into new project no? I think that is the easiest method rather than trying to find out the solution for your old project. — Sampath, Aug 23 '17 at 08:09

white screen after splash screen in production build

0 Answers0