Ionic-app-scripts: RC4 - White screen on startup (Android)

Created on 21 Dec 2016 · 52Comments · Source: ionic-team/ionic-app-scripts

_From @demirk4n on December 17, 2016 14:20_

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
Ionic 2 Android application hangs with a white screen during startup. It takes 10 - 12 secs for the app to display root page after splash-page / spinner fades. This doesn't occur in browser with ionic serve.

Expected behavior:
RC3 is booting fine without any white screens following splash-page.

Steps to reproduce:
Thinking that I had an issue with my code, tested with a blank app - could produce the same issue.

$ ionic start cutePuppyPics --v2
$ cordova platform add android
$ ionic run android

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):
Your system information:
Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.8
Node Version: v7.2.1
Xcode version: Not installed
```
package.json

{
"name": "ionic-hello-world",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"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",
"ionic-angular": "2.0.0-rc.4",
"ionic-native": "2.2.11",
"ionicons": "3.0.0",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.26"
},
"devDependencies": {
"@ionic/app-scripts": "0.0.47",
"typescript": "2.0.9"
},
"cordovaPlugins": [
"cordova-plugin-console",
"cordova-plugin-statusbar",
"cordova-plugin-whitelist",
"cordova-plugin-splashscreen",
"cordova-plugin-device",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": [],
"description": "cutePuppyPics: An Ionic project"
}

_Copied from original issue: driftyco/ionic#9686_

v2 build

Source

jgw96

Most helpful comment

For the last couple of months, your only advice for slow starting Ionic 2 apps is telling us to "build the app in production mode" and then closing the issue. We are building it in production mode using the latest versions of both ionic and ionic-app-scripts and it's not helping.

I know that Ionic 2 is still RC, but it seems that you are deliberately overlooking this problem. This is the third or fourth slow startup issue that you closed without properly resolving or addressing it (the most discussed being https://github.com/driftyco/ionic/issues/6776).
Could you please at least give as an estimate how the loading times could improve before the 2.0 release or give us some experiment results that you measured? I still haven't seen any reference startup time from you.

Slow startup is the biggest Ionic's issue for me and it's an app release killer (which is a shame when the app iself runs fine).
According to the #6776 issue that you've closed, there are many other people that feel the same.

Kobzol on 17 Jan 2017

👍10

All 52 comments

_From @graphefruit on December 17, 2016 14:54_

Have you tried to build the Release app?
Ionic build Android --release --prod and measure the time here? The RC4 changed much while building

6776 see here

jgw96 on 21 Dec 2016

_From @demirk4n on December 17, 2016 16:1_

Much better ,thanks. But building for release also adds an extra step to sign the application as (AFAIK) you can't install an unsigned apk to a device. "ionic run android" was much more convenient in that sense. Anyway, if this is not a bug on ionic side, I'll try to automate release build (apk sign -> device install) with a bash script.

jgw96 on 21 Dec 2016

_From @pwespi on December 17, 2016 17:32_

You can use ionic run android --prod, then no signing is required, but AoT and minification are used.

jgw96 on 21 Dec 2016

_From @alexbainbridge on December 17, 2016 19:28_

Try bumping ionic storage to 1.1.7

https://github.com/driftyco/ionic/issues/9677

jgw96 on 21 Dec 2016

_From @asa47 on December 17, 2016 20:33_

I tried with both approaches but there is no improvement, it still takes 10 seconds to load the root page, not sure... And is it required to use ionic build or ionic run? I usually build my app through platform specific IDE (i.e. xCode and Android Studio), so I only use ionic prepare <platform> (cordova prepare <platform>) and build/publish the app through the platform specific IDE.

jgw96 on 21 Dec 2016

_From @gtsopour on December 17, 2016 20:47_

Same issue here. Any suggestion please? This is happening only with the RC4. @asa47?

jgw96 on 21 Dec 2016

_From @demirk4n on December 17, 2016 22:24_

@pwespi 's suggestion ionic run android --prod worked for me.
@alexbainbridge I tried that, it didn't solve my case. In my case "serve" works fine but "build" produces the white-screen delay on startup.

jgw96 on 21 Dec 2016

_From @MT-- on December 18, 2016 0:25_

@demirk4n ionic-app-scripts 0.47 requires you to make a main.ts and remove your main.dev.ts and main.prod.ts... Did you follow those instructions in the CHANGELOG.md?

jgw96 on 21 Dec 2016

_From @demirk4n on December 18, 2016 1:59_

@MT-- Yes, of course. With out that it wouldn't even build.

jgw96 on 21 Dec 2016

_From @MT-- on December 18, 2016 2:1_

@demirk4n kk, just checking! 😞

jgw96 on 21 Dec 2016

_From @demirk4n on December 18, 2016 2:9_

@MT-- Hey, no problem. Thanks for asking my fellow ionican :)

jgw96 on 21 Dec 2016

_From @sonamkumar on December 18, 2016 7:4_

I have the same issue. Will try with --release apk. And will report back.

jgw96 on 21 Dec 2016

_From @graphefruit on December 18, 2016 8:1_

Hey guys, please make sure that this is working on your side:
Comment from dan: https://github.com/driftyco/ionic/issues/6776#issuecomment-267378745
If you can't run npm run ionic:build --aot then something is wrong.
Even if you see RC4 and Appscripts 0.47 - I had the same problems that I couldn't run this command - so maybe try it then with a complete new setup.
Greetings

jgw96 on 21 Dec 2016

_From @gtsopour on December 18, 2016 11:15_

Hello Guys,
I set the following preferences in the config.xml and now I have not the white screen at the beginning for some seconds. But it seems to me that somehow it takes more time for the App the be ready in Android with the RC4. So probably the question is not about the white screen but about the loading/ready() time in Android. The same applies also to the official starting apps. More close to this report https://forum.ionicframework.com/t/rc4-seems-slower-to-load-the-app/73495

  <preference name="SplashMaintainAspectRatio" value="true"/>
  <preference name="FadeSplashScreenDuration" value="300"/>
  <preference name="SplashScreenDelay" value="2000"/>
  <preference name="FadeSplashScreenDuration" value="1000"/>
  <preference name="SplashScreen" value="screen"/>
  <preference name="ShowSplashScreenSpinner" value="true"/>
  <preference name="AutoHideSplashScreen" value="false"/>

Best
George

jgw96 on 21 Dec 2016

_From @Fdom92 on December 18, 2016 11:55_

Hi, i have the same issue, i installed the splashscreen plugin and used ionic resources to generate all images but when i run on device i have a white screen some seconds and then the app appears.

There is a issue with this on ionic-cli:
https://github.com/driftyco/ionic-cli/issues/1776

This is my config.xml and this my ionic info:

Your system information:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 3.13
Node Version: v6.9.1
Xcode version: Not installed

jgw96 on 21 Dec 2016

_From @urm47 on December 18, 2016 15:15_

Same.
If I specify a value > 0 for "SplashScreenDelay" the splash screen shows up for the specified amount of time.
However, I would prefer the same behavior as with iOS, where a value of 0 shows the splash screen until the app is started.

jgw96 on 21 Dec 2016

_From @aamir1995 on December 19, 2016 9:36_

same situation :(

jgw96 on 21 Dec 2016

_From @brandyscarney on December 19, 2016 15:42_

Can everyone make sure they are running the latest CLI 2.1.17:

npm install -g ionic@latest
ionic -v

and then make sure you are on the latest @ionic/app-scripts: https://github.com/driftyco/ionic-app-scripts/blob/master/CHANGELOG.md#0047-2016-12-12

Then, compare your config.xml with the conference app, for example: https://github.com/driftyco/ionic-conference-app/blob/master/config.xml

You should remove the android platform and add it back:

ionic platform rm android
ionic platform add android

and then make sure you are using the --prod flag:

ionic run android --prod

Please let me know if you are still having issues after this, and include a sample repository if you can.

As for the longer load times, we are currently working on reducing the bundle size in order to speed up load times. cc @danbucholtz

jgw96 on 21 Dec 2016

_From @urm47 on December 19, 2016 18:0_

@danbucholtz Thanks. Works for me, if I specify a value SplashScreenDelay.
Since 3000ms is to short, I guess I will have to set a very large value and close the splash screen in the app.component.

But why are iOS and Android different? iOS works also with SplashScreenDelay=0

jgw96 on 21 Dec 2016

_From @nilswieber on December 19, 2016 21:51_

If i run the build with --prod i get the following output:
> ionic-app-scripts build "--prod" [22:47:14] ionic-app-scripts 0.0.47 [22:47:14] build prod started ... [22:47:14] clean started ... [22:47:14] clean finished in 6 ms [22:47:14] copy started ... [22:47:14] ngc started ... [22:47:28] ngc finished in 14.44 s [22:47:28] webpack started ... [22:47:28] copy finished in 14.66 s (node:20671) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): SyntaxError: Unexpected token u in JSON at position 0

If i run it without --prod i get a white screen for about 5 seconds. With RC3 the loading time is a lot faster than RC4.

jgw96 on 21 Dec 2016

_From @jlsuarezs on December 20, 2016 2:51_

I have exactly the same problem. After RC4 I can't build in production :(
Any help?

jgw96 on 21 Dec 2016

_From @danbucholtz on December 20, 2016 4:13_

@nilswieber, @jlsuarezs, can you run the same command with --debug and see if that gives any more info? At the end of the output, there should be a stack trace too. Can you share that?

Thanks,
Dan

jgw96 on 21 Dec 2016

_From @sonamkumar on December 20, 2016 6:37_

i just get a blank white screen post splash screen when i use - ionic run android --prod.

jgw96 on 21 Dec 2016

_From @Fdom92 on December 20, 2016 7:33_

Hi, this is my ionic info:

Your system information:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.6
Node Version: v6.9.1
Xcode version: Not installed

I am using ionic CLi 2.1.17 and app scripts 0.0.47 and updated the config.xml:

<content src="index.html"/>
<access origin="*"/>
<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 src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/>
<icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/>
<icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/>
<icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/>
<icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/>
<icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
<splash src="resources/android/splash/drawable-land-ldpi-screen.png" density="land-ldpi"/>
<splash src="resources/android/splash/drawable-land-mdpi-screen.png" density="land-mdpi"/>
<splash src="resources/android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/>
<splash src="resources/android/splash/drawable-port-mdpi-screen.png" density="port-mdpi"/>
<splash src="resources/android/splash/drawable-port-hdpi-screen.png" density="port-hdpi"/>
</platform>
<platform name="ios">
<allow-intent href="itms:*"/>
<allow-intent href="itms-apps:*"/>
</platform>
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="android-minSdkVersion" value="21"/>
<preference name="BackupWebStorage" value="none"/>
<preference name="StatusBarStyle" value="default" />
<preference name="SplashScreen" value="screen"/>
<preference name="orientation" value="portrait"/>
<preference name="SplashMaintainAspectRatio" value="true"/>
<preference name="FadeSplashScreenDuration" value="300"/>
<preference name="ShowSplashScreenSpinner" value="false"/>
<preference name="AutoHideSplashScreen" value="true"/>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine"/>
<preference name="SplashScreenDelay" value="6000"/>
<feature name="StatusBar">
<param name="ios-package" onload="true" value="CDVStatusBar"/>
</feature>
<plugin name="cordova-plugin-console" spec="~1.0.4"/>
<plugin name="cordova-plugin-device" spec="~1.1.3"/>
<plugin name="cordova-plugin-whitelist" spec="~1.3.0"/>
<plugin name="cordova-plugin-statusbar" spec="~2.2.0"/>
<plugin name="cordova-plugin-splashscreen" spec="~4.0.0"/>
<icon src="resources/android/icon/drawable-xhdpi-icon.png"/>
</widget>

I remove/add the android platform as @brandyscarney says and run ionic build android and now i have a splashscreen that appears a few seconds then a fade effect into a blank page and after few seconds the app starts.

jgw96 on 21 Dec 2016

_From @beardroid2005 on December 20, 2016 9:25_

Hi
I have updated my project from rc2 to rc4.
When run my application on android device, I see a blank screen for a long time, then the device show the alert "Application error. The connection to the server was unsuccesful (file:///android_asset..."

If I dont press OK button, I can see my app start. With rc2 (and rc3 too) the application start without problem

command used:
ionic run android --prod

I removed the splashscreen plugin, without success (blank page)

from config.xml

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v6.9.2
Xcode version: Not installed

Cordova Android platform: 6.0.0

jgw96 on 21 Dec 2016

_From @beardroid2005 on December 20, 2016 9:27_

Sorry, wrong copy
config.xml

preference name="webviewbounce" value="false"
preference name="UIWebViewBounce" value="false"
preference name="Orientation" value="portrait"
preference name="DisallowOverscroll" value="true"
preference name="android-minSdkVersion" value="16"
preference name="BackupWebStorage" value="none"
preference name="SplashMaintainAspectRatio" value="true"
preference name="FadeSplashScreenDuration" value="300"
preference name="SplashScreen" value="screen"
preference name="SplashScreenDelay" value="0"
feature name="StatusBar"
param name="ios-package" onload="true" value="CDVStatusBar"
feature
plugin name="cordova-plugin-device" spec="~1.1.3"
plugin name="cordova-plugin-console" spec="~1.0.4"
plugin name="cordova-plugin-whitelist" spec="~1.3.0"
plugin name="cordova-plugin-splashscreen" spec="~4.0.0"
plugin name="cordova-plugin-statusbar" spec="~2.2.0"
plugin name="ionic-plugin-keyboard" spec="~2.2.1"
plugin name="cordova-plugin-geolocation" spec="~2.4.0"
plugin name="cordova-plugin-globalization" spec="~1.0.4"
plugin name="phonegap-plugin-barcodescanner" spec="~6.0.3"
plugin name="cordova-plugin-nativestorage" spec="~2.0.2"

jgw96 on 21 Dec 2016

_From @nilswieber on December 20, 2016 13:39_

@danbucholtz
This is the output for ionic run android --prod --debug:

ionic run android --prod --debug

IonicRControl@ ionic:build <Path to Ionic Project>
ionic-app-scripts build "--prod" "--debug"

[14:25:49]  ionic-app-scripts 0.0.47 
[14:25:49]  build prod started ... MEM: 116.4MB 
[14:25:49]  clean started ... MEM: 116.5MB 
[ DEBUG! ]  clean <Path to Ionic Project>/www/build  MEM: 116.5MB 
[14:25:49]  clean finished in 2 ms MEM: 116.6MB 
[14:25:49]  copy started ... MEM: 116.6MB 
[14:25:49]  ngc started ... MEM: 116.6MB 
[14:26:00]  ngc finished in 10.92 s MEM: 478.4MB 
[14:26:00]  webpack started ... MEM: 478.4MB 
[ DEBUG! ]  [IonicEnvironmentPlugin] apply: creating environment plugin  MEM: 485.6MB 
[ DEBUG! ]  Successfully copied <Path to Ionic Project>/src/index.html to 
            <Path to Ionic Project>/www/index.html  MEM: 491.3MB 
[ DEBUG! ]  Successfully copied <Path to Ionic Project>/src/manifest.json to 
            <Path to Ionic Project>/www/manifest.json  MEM: 491.3MB 
[ DEBUG! ]  Successfully copied <Path to Ionic Project>/src/service-worker.js to 
            <Path to Ionic Project>/www/service-worker.js  MEM: 491.3MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/node_modules/ionicons/dist/fonts/ionicons.woff2 to 
            <Path to Ionic Project>/www/assets/fonts/ionicons.woff2  MEM: 
            491.3MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/node_modules/ionic-angular/fonts/ionicons.woff2 to 
            <Path to Ionic Project>/www/assets/fonts/ionicons.woff2  MEM: 
            491.3MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/node_modules/ionic-angular/fonts/roboto-bold.ttf 
            to <Path to Ionic Project>/www/assets/fonts/roboto-bold.ttf  MEM: 
            491.4MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/node_modules/ionic-angular/fonts/roboto-bold.woff 
            to <Path to Ionic Project>/www/assets/fonts/roboto-bold.woff  MEM: 
            491.4MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/node_modules/ionic-angular/fonts/roboto-light.ttf 
            to <Path to Ionic Project>/www/assets/fonts/roboto-light.ttf  MEM: 
            491.4MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/node_modules/ionic-angular/fonts/ionicons.scss to 
            <Path to Ionic Project>/www/assets/fonts/ionicons.scss  MEM: 
            491.4MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/node_modules/ionic-angular/fonts/roboto-light.woff 
            to <Path to Ionic Project>/www/assets/fonts/roboto-light.woff  MEM: 
            491.4MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/node_modules/ionic-angular/fonts/roboto-medium.ttf 
            to <Path to Ionic Project>/www/assets/fonts/roboto-medium.ttf  MEM: 
            491.4MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/node_modules/ionic-angular/fonts/roboto-medium.woff
            to <Path to Ionic Project>/www/assets/fonts/roboto-medium.woff  MEM: 
            491.4MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/node_modules/ionic-angular/fonts/noto-sans.scss to 
            <Path to Ionic Project>/www/assets/fonts/noto-sans.scss  MEM: 
            491.5MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/node_modules/ionic-angular/fonts/roboto-regular.ttf
            to <Path to Ionic Project>/www/assets/fonts/roboto-regular.ttf  MEM: 
            491.5MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/node_modules/ionic-angular/fonts/roboto-regular.woff
            to <Path to Ionic Project>/www/assets/fonts/roboto-regular.woff  MEM: 
            491.5MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/src/assets/favicon/android-chrome-192x192.png to 
            <Path to Ionic Project>/www/assets/favicon/android-chrome-192x192.png  
            MEM: 491.5MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/src/assets/favicon/android-chrome-512x512.png to 
            <Path to Ionic Project>/www/assets/favicon/android-chrome-512x512.png  
            MEM: 491.5MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/src/assets/favicon/apple-touch-icon.png to 
            <Path to Ionic Project>/www/assets/favicon/apple-touch-icon.png  MEM: 
            491.5MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/src/assets/favicon/browserconfig.xml to 
            <Path to Ionic Project>/www/assets/favicon/browserconfig.xml  MEM: 
            491.6MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/src/assets/favicon/favicon-16x16.png to 
            <Path to Ionic Project>/www/assets/favicon/favicon-16x16.png  MEM: 
            491.7MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/src/assets/favicon/favicon-32x32.png to 
            <Path to Ionic Project>/www/assets/favicon/favicon-32x32.png  MEM: 
            491.5MB 
[ DEBUG! ]  Successfully copied <Path to Ionic Project>/src/assets/favicon/favicon.ico 
            to <Path to Ionic Project>/www/assets/favicon/favicon.ico  MEM: 
            491.5MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/src/assets/favicon/mstile-150x150.png to 
            <Path to Ionic Project>/www/assets/favicon/mstile-150x150.png  MEM: 
            491.5MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/node_modules/ionic-angular/fonts/roboto.scss to 
            <Path to Ionic Project>/www/assets/fonts/roboto.scss  MEM: 
            491.5MB 
(node:3142) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): SyntaxError: Unexpected token u in JSON at position 0
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/src/assets/favicon/safari-pinned-tab.svg to 
            <Path to Ionic Project>/www/assets/favicon/safari-pinned-tab.svg  MEM: 
            491.5MB 
[ DEBUG! ]  Successfully copied <Path to Ionic Project>/src/assets/i18n/de.json to 
            <Path to Ionic Project>/www/assets/i18n/de.json  MEM: 491.5MB 
[ DEBUG! ]  Successfully copied <Path to Ionic Project>/src/assets/i18n/en.json to 
            <Path to Ionic Project>/www/assets/i18n/en.json  MEM: 491.5MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/src/assets/leaflet/layers-2x.png to 
            <Path to Ionic Project>/www/assets/leaflet/layers-2x.png  MEM: 
            491.5MB 
[ DEBUG! ]  Successfully copied <Path to Ionic Project>/src/assets/leaflet/layers.png 
            to <Path to Ionic Project>/www/assets/leaflet/layers.png  MEM: 
            491.5MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/src/assets/leaflet/marker-icon-2x.png to 
            <Path to Ionic Project>/www/assets/leaflet/marker-icon-2x.png  MEM: 
            491.5MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/src/assets/leaflet/marker-icon.png to 
            <Path to Ionic Project>/www/assets/leaflet/marker-icon.png  MEM: 
            491.5MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/src/assets/leaflet/marker-shadow.png to 
            <Path to Ionic Project>/www/assets/leaflet/marker-shadow.png  MEM: 
            491.6MB 
[ DEBUG! ]  Successfully copied <Path to Ionic Project>/src/assets/mocks/actions.json 
            to <Path to Ionic Project>/www/assets/mocks/actions.json  MEM: 
            491.6MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/src/assets/mocks/devicetypes.json to 
            <Path to Ionic Project>/www/assets/mocks/devicetypes.json  MEM: 
            491.6MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/node_modules/ionicons/dist/fonts/ionicons.woff to 
            <Path to Ionic Project>/www/assets/fonts/ionicons.woff  MEM: 
            491.8MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/node_modules/ionic-angular/fonts/ionicons.woff to 
            <Path to Ionic Project>/www/assets/fonts/ionicons.woff  MEM: 
            492.0MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/node_modules/ionic-angular/polyfills/polyfills.js 
            to <Path to Ionic Project>/www/build/polyfills.js  MEM: 492.0MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/node_modules/ionicons/dist/fonts/ionicons.eot to 
            <Path to Ionic Project>/www/assets/fonts/ionicons.eot  MEM: 
            492.1MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/node_modules/ionicons/dist/fonts/ionicons.ttf to 
            <Path to Ionic Project>/www/assets/fonts/ionicons.ttf  MEM: 
            492.1MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/node_modules/ionic-angular/fonts/ionicons.ttf to 
            <Path to Ionic Project>/www/assets/fonts/ionicons.ttf  MEM: 
            492.1MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/node_modules/ionic-angular/fonts/noto-sans-bold.ttf
            to <Path to Ionic Project>/www/assets/fonts/noto-sans-bold.ttf  MEM: 
            492.3MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/node_modules/ionicons/dist/fonts/ionicons.svg to 
            <Path to Ionic Project>/www/assets/fonts/ionicons.svg  MEM: 
            492.3MB 
[ DEBUG! ]  Successfully copied 
            <Path to Ionic Project>/node_modules/ionic-angular/fonts/noto-sans-regular.ttf
            to <Path to Ionic Project>/www/assets/fonts/noto-sans-regular.ttf  
            MEM: 492.3MB 
[14:26:00]  copy finished in 11.14 s MEM: 492.3MB

After that the Android APK is built normally (no stacktrace or anything like that) but when started i only get a blank white screen.
If i inspect the device in chrome with chrome://inspect i can see the following errors in the javascript console:

file:///android_asset/www/build/main.css Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///android_asset/www/build/main.js Failed to load resource: net::ERR_FILE_NOT_FOUND

If i run the app with --dev the build works, but the startup of the app is very slow (The App remains on the blank white screen for about 5 seconds before my root component is displayed).

jgw96 on 21 Dec 2016

_From @jayeshanandani on December 20, 2016 18:12_

@beardroid2005 It was happening for me as well in ionic-app-scripts 0.047 version and it was due to device ready event being fired after 20 seconds. But it works well with the update in ionic-app-scripts 0.0.48 version.

jgw96 on 21 Dec 2016

_From @jayeshanandani on December 20, 2016 18:14_

Others who have blank screen please update to 0.0.48 ionic-app-scripts. Ensure you have proper splash and icons generated inside platform as there is a Cordova android bug which doesn't copies splash to android platform.

I use following config.xml in my project and it works well on iOS and android both:

   <preference name="BackupWebStorage" value="none" />
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="10000" />
    <preference name="FadeSplashScreen" value="true" />
    <preference name="FadeSplashScreenDuration" value="750" />
    <preference name="SplashScreenBackgroundColor" value="false" />

jgw96 on 21 Dec 2016

_From @nilswieber on December 20, 2016 18:29_

With the 0.0.48 ionic-app-scripts i get the following error in the javascript console when build with --prod and the white screen.

Uncaught Error: Module build failed: TypeError: Cannot set property 'sources' of undefined
    at <path-to-project>/node_modules/@ionic/app-scripts/dist/webpack/loader-impl.js:35:37

With --dev the deviceready event still takes about 5 seconds

jgw96 on 21 Dec 2016

_From @jayeshanandani on December 20, 2016 18:41_

@nilswieber : you might want to delete plugins and android platform and install them once again, I had this issue and now it takes around 3 seconds for plugins.

Regarding the sources error I don't know what might be causing that. Are you using any custom webpack configuration?

In addition, please paste output for ionic info

jgw96 on 21 Dec 2016

_From @nilswieber on December 20, 2016 19:16_

@jayeshanandani : I tried this but still no luck. And i was wrong it doesn't take 5 seconds it takes about 10 seconds for the app to be usable which is not acceptable. I didn't have any problems like this with RC3.

No i don't have any custom webpack configuration that i am aware of.

This is the output of ionic info:

Your system information:

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.48
ios-deploy version: 1.9.0 
ios-sim version: 5.0.12 
OS: macOS Sierra
Node Version: v6.9.1
Xcode version: Xcode 8.2 Build version 8C38

jgw96 on 21 Dec 2016

_From @jayeshanandani on December 20, 2016 19:21_

@nilswieber : Please take a look at issue #6776 and also at this comment: https://github.com/driftyco/ionic/issues/6776#issuecomment-267961514

jgw96 on 21 Dec 2016

_From @nilswieber on December 20, 2016 19:29_

@jayeshanandani : I just tried it with a blank starter app (ionic start test -v2) and it also takes about 8-10 seconds to be usable on Android so it doesn't seem to be related to my custom project.

jgw96 on 21 Dec 2016

_From @Chal131313 on December 21, 2016 8:4_

I have the same problem, after updating from rc3 to rc4, the deviceready time went from <500ms to more then 3 seconds. I tried updating app-scripts to 0.48, updating ionic-cli, but nothing helps. The only thing i see that helps is reverting my app back to rc3

jgw96 on 21 Dec 2016

I have the same problem,splash screen is ok,but the blank show 10s after splash disappeared,then app show.sometimes it show error "cant connect assets/www/index.html".i think it isnt caused by rc4,it is ok when use script 0.0.45 version.

and it is quickly when use 0.0.48 on emulator,but happen in real device

wolfljj on 22 Dec 2016

Finally i resolved the blank screen!! Steps i followed:

Delete npm modules
Delete platforms
Delete plugins (all of them)
Update ionic app scripts to 0.0.48 in package json
npm install
Add android 6.1.0 platform
Check plugin list and plaftorm list
ionic build android

For more info to help this is my ionic info:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.48
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.6
Node Version: v6.9.1
Xcode version: Not installed

This my config for splashscreen:

<preference name="SplashScreen" value="screen"/>
<preference name="SplashMaintainAspectRatio" value="true"/>
<preference name="FadeSplashScreen" value="true" />
<preference name="FadeSplashScreenDuration" value="750" />
<preference name="ShowSplashScreenSpinner" value="false"/>
<preference name="AutoHideSplashScreen" value="true"/>
<preference name="SplashScreenDelay" value="10000"/>
<preference name="SplashScreenBackgroundColor" value="false" />

And now i have my splashscreen a few seconds and then a fade effect into my homescreen :)

Hope this will help you all guys :) :)

EDIT
I found another problem, if i open my app (all ok with splashscreen) and then press hardware back button it close my app (this ok too) but when i open my app again there is the ** black screen again (now my splashscreen never shows only blank screen) and then my app appears.

Fdom92 on 22 Dec 2016

👍3

I got the same issue, when updating to RC.4 from RC.3, it got resolved now, my path for module's import statement in app.module.ts had different case (currentposts/index) i changed to correct case which is (currentPosts/index), now its working.

loki1511 on 22 Dec 2016

Same for me, Android boot time is super slow, slower than on my real iPhone 4s (!) after upgrading to app-scripts 0.0.48

Seems others face the same problem (link to the forum):

https://forum.ionicframework.com/t/rc4-seems-slower-to-load-the-app/73495

Here my ionic info:

Your system information:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.48
ios-deploy version: 1.9.0
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v7.2.1
Xcode version: Xcode 8.0 Build version 8A218a

Cordova platform version:

Installed platforms:
android 6.1.0
ios 4.3.1

peterpeterparker on 23 Dec 2016

@danbucholtz (thx a lot) pointed out on the forum, installing the latest version of Ionic may solve the issue, which was for me the case. My android app boot time is back to normal. I did:

sudo npm uninstall -g ionic
sudo npm cache clean
sudo npm install -g ionic@latest

peterpeterparker on 28 Dec 2016

👍1

if u need to notice whats wrong try install new project with ionic 2 super app starter
then run
ionic build android
the white screen come after cordova splash screen
i can confirm in super app starter when i used the --prod this disappeared

i can confirm that the below solved my problem

sudo npm uninstall -g ionic
sudo npm cache clean
sudo npm install -g ionic@latest

mohamedsharaf on 31 Dec 2016

Same issue,white screen for 10-12 seconds in my app,what to do?

adirzoari on 16 Jan 2017

👎1

@adirzoari,

Run ionic run android --prod using the latest ionic cli

npm install -g ionic@latest

Thanks,
Dan

danbucholtz on 17 Jan 2017

I believe this issue is resolved, so I am going to close this. I will reopen if needed.

Thanks,
Dan

danbucholtz on 17 Jan 2017

Kobzol on 17 Jan 2017

👍10

Fully agree with @Kobzol . We are facing the same issue since RC4 and we tried to solve it with all the hints we could find with no success. This is a major blocker for releasing an app.

packowitz on 17 Jan 2017

Hello. I also have the same issue as written above. After migrating from RC3 to RC4 today app splash screen is spinning for 15 sec minimum... The --prod options helps a little bit, but still it is not the same as it was before...

The main thing is that my app consists of few buttons which on click sends few requests... I thinks this is critical.

nonamez on 17 Jan 2017

I agree its critical. I published my app and got some feedback,the users wrote about that and feel its annoying

adirzoari on 17 Jan 2017

for testing, I recreate my application from zero.

With the latest ionic CLI

Create a new app
copy my app (not the app.* files) into new app
add all plugins
modify app.* files with my changes
Set the splashscreen with Autohide = false

Run android in --prod mode.
The startup problem is reduced, but if I forget the --prod, my app failed to start.

I agree, its critical.

beardroid2005 on 17 Jan 2017

@beardroid2005 at some point it's ok as --prod option means production. For the final version you should use this every time. On the other hand in some cases (such is mine) even in production mods there is some lags.

nonamez on 17 Jan 2017

@nonamez how do you suggest to solve it?

adirzoari on 17 Jan 2017

👍1

@adirzoari I dont know... I'm not from Ionic dev team. Just mentioned that if you forgot to use --prod in production - the problem is not in the ionic.

nonamez on 17 Jan 2017

Was this page helpful?

0 / 5 - 0 ratings

Related issues

Getting source-maps with --prod build?

christofferjjohansen · 3Comments

"ionic run android" Does not work on Ionic 2 rc5

brandyscarney · 4Comments

what command do I give to run 'ionic serve in production' ? so that I minifies ( all that good stuff to render page fast in production ) ?

brandyscarney · 4Comments

Can't run with target

loicfavory · 4Comments

Live Reload CSS Windows 10

danbucholtz · 4Comments