ionic 2 app show blank screen on android devide 4.4.4 after splash screen using
> ionic run android --prod --device
but when i m using > ionic run android command it work with bad performance on startup.
any idea to fix this issue ?
1 Like
What error is you application throwing so it can’t display anything?
Use this https://ionic.zone/debug/remote-debug-your-app#android
put value in splash screen delay in config,xml
i tried all the trick related to splash screen but i think its not the problem . because after splash screen a white screen appear
1 Like
Interesting.
What do you get under “Elements”?
I think you are missing also --aot when compiling.
About the black screen: probably you didn’t installed the splashscreen plugin or you have not generated the correct images.
In doubt try writing a “preloader” in place of the splashscreen pluing or try to reinstall the android platform.
Does it work on other Android versions?
Does it work in Android emulators?
Any other environments where it does or does not work?
Hi there,
Chances are there is some sort of AoT error happening.
You have few ways to debug this.
You could debug this a few ways
Run
node ./node_modules/.bin/ionic-app-scripts build --prod
Then open www/index.html locally in the browser and see if there are any errors being printed out in the console.
Another option is to run debug mode.
node ./node_modules/.bin/ionic-app-scripts build --prod --debug
If there are any errors in the building of the app, this will print them out
1 Like
I had the same problem that I solved with the following settings in the configure.xml file:
preference name=“SplashScreen” value="screen"
preference name=“SplashScreenDelay” value=“3000"
preference name=“AutoHideSplashScreen” value="false”
Here you set to not hide the Splash screen after 3 seconds, but you will close it in app.component.ts:
constructor(platform: Platform, public userSession: UserSession, private alertController: AlertController,
private events: Events, private guiHelper: GuiHelper) {
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();
Splashscreen.hide();
For more information read here:
Well after day of debugging my issue its about my variables.scss
$white: #FFFFFF;
$white-a: darken($white, 3%);
$white-b: darken($white, 6%);
$white-c: darken($white, 12%);
$white-d: darken($white, 24%);
$black: rgba(#000000, .8);
$black-a: lighten($black, 10%);
$black-b: lighten($black, 20%);
$black-c: lighten($black, 40%);
$black-d: lighten($black, 60%);
$theme-color-1: #5dc3b5;
$theme-color-2: #ae75e7;
$theme-color-3: #5e5874;
// Named Color Variables
// --------------------------------------------------
// Named colors makes it easy to reuse colors on various components.
// It’s highly recommended to change the default colors
// to match your app’s branding. Ionic uses a Sass map of
// colors so you can add, rename and remove colors as needed.
// The “primary” color is the only required color in the map.
$colors: (
primary: #387ef5,
danger: #f53d3d,
light: #f4f4f4,
favorite: #69bb7b,
gray: #898989,
stranger : #5dc3b5,
violet: #ae75e7,
orange : #e9a86b,
dark: #222, -----> if I commented this variable or one of the value its work 100%
if i add one more variable like dark or secondary white screen appear on android 4.4.4 when im using ionic run android --prod
walkthrough:(
base: $theme-color-1,
contrast: $white
),
walkthrough-alt:(
base: $theme-color-2,
contrast: $white
),
walkthrough-header:(
base: transparent,
contrast: $white
),
header:(
base: $theme-color-1,
contrast: $white
),
header-alt:(
base: $theme-color-2,
contrast: $white
),
facebook:(
base: #3b5998,
contrast: $white
),
google:(
base: #cc181e,
contrast: $white
),
button:(
base: $theme-color-1,
contrast: $white
),
button-alt:(
base: $theme-color-2,
contrast: $white
),
button-alt2:(
base: $white,
contrast:$theme-color-1
),background:(
base: $white-a,
contrast: $black-b
),
tabs-navigation:(
base: $white,
contrast: $white-d
));
4 Likes
How did you finally find this?
I think there was a recent update to Cordova (last week) and since then this delay has been back in my app. The splash screen appears for whatever period it is set for, then there is a blank screen for 3 or 4 seconds.Total launch time is about 12 seconds!
It was previously solved by re-installing the Android platform. The launch time went back to 6 seconds. I am going to try this, because I think my Android platform is one behind the latest release. (I’m reluctant to do this however because this has previously screwed up my splash screen and icon images!)
EDIT: Running…
npm install -g ionic@latest
…has significantly improved the speed of loading my apps.
What is your total launch time? In my experience, the white screen period is a symptom of a delayed launch, not a color issue. You might be able to eliminate the white screen delay from your launch time, rather than just change the color of it?
Create new project from scratch and start add my plugin one after one and test my app no issue appear,
when i add my variables.scss the issue appear so i start debug it and i found it… weird one no ?
1 Like
well total launch time for android 4.4.4 its about 2570ms for android 6 1580ms
Yes, but great of you that you actually went all the way and systematically hunted the bug down - and wrote about it here! Thanks for that.
Thanks! You saved my job. LOL
Thanks a lot @panchoslimi