Why white screen stuck after splash screen in Ionic 4?

I also faced this problem, but in my case, the problem is with default routing.

When App initializes it tries to open on default route that is Empty route, which further we redirect to the actual working route, In my case Empty route was redirected to "/dashboard".

Example code

const routes: Routes = [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full'
  },
  {
    path: 'dashboard',
    canActivate: [AuthGuard],
    loadChildren: './home/home.module#HomePageModule'
  },
  { 
    path: 'login',
    loadChildren: './public/login/login.module#LoginPageModule' 
  }
]

In the above code, my Empty route is redirecting to dashboard where [AuthGuard] is active, and it stuck in circulation, So I decided it redirect to the route where [AuthGuard] is not active, That is "/login" in my case. Updated code by redirecting to login where [Authgaurd] is not active.

 const routes: Routes = [
      {
        path: '',
        redirectTo: 'login',
        pathMatch: 'full'
      },
      {
        path: 'dashboard',
        canActivate: [AuthGuard],
        loadChildren: './home/home.module#HomePageModule'
      },
      { 
        path: 'login',
        loadChildren: './public/login/login.module#LoginPageModule' 
      }
 ]

After building the project for Andriod, The app runs successfully.

Justed posted the answer if anyone has this issue same like me on the same problem.

Found solution. Problem was in cordova-plugin-android-permissions. On android 6+ (maybe android 5 too, I don’t have it on my devices) user should accept permissions manually. In application permissions request looks like alert view. And this alert automatically stops splashscreen (even if you don’t hide splashscreen automatically and don’t call hide method yet) and broke fade out animation. Also this permissions request broke splashscreen even if permissions already added.

So solution is to request permissions after splashScreen.hide() after timeout delay equal to fade out timeout.

example:
config.xml

<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="FadeSplashScreenDuration" value="1000" />
<preference name="SplashScreenDelay" value="30000" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="FadeSplashScreen" value="true" />
<preference name="ShowSplashScreen" value="true" />

In app.components.ts

  initializeApp() {
    this.platform.ready().then(() => {
      setTimeout(() => {
        this.splashScreen.hide();
      }, 1000);
    }
  }

NOTED!!! the setTimeout delay should be equal to FadeSplashScreenDuration param value in config.xml

Conclusion: The code above made the smooth transition from the Splash screen, that will fade smoothly to you start up page. No white screen is shown at all. Hope this would be helpful.

I’ve solved this issue by setting the correct parameters on config.xml

<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="10000" />
<preference name="FadeSplashScreenDuration" value="1000" />
<preference name="SplashScreen" value="screen" />
<preference name="ShowSplashScreen" value="true" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="FadeSplashScreen" value="true" />

Then, on my platform.ready() instruction all I do is Splashscreen.hide() and after that run the project on android using.

ionic cordova run android