Blank screen after splash screen when running tabs project

Ionic Framework
1

Hi everyone.

I am developing an application with ionic and i am using tabs project. The problem is after the splash screen end’s loading the app stuck with a blank white screen for at least 2 seconds then loads the tabs module.

This is how tabs-routings-module page looks like

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: '',
        redirectTo: 'tab-1',
        pathMatch: 'full'
      },
      {
        path: 'tab-1',
        loadChildren: () => import('...')
      },
      {
        path: 'tab-2',
        loadChildren: () => import('...')
      },
      {
        path: 'tab-3',
        loadChildren: () =>import('...')
      },
      {
        path: 'tab-4',
        loadChildren: () => import('...')
      }
    ]
  },{
    path: '',
    redirectTo: 'tabs/tab-1',
    pathMatch: 'full'
  },
];

and this is the app rounting pag


const routes: Routes = [ {
    path: '',
    redirectTo: 'tabs-pages',
    pathMatch: 'full'
  },
  {
    path: 'tabs-pages',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  }
}]

and in order to load the first page after platform is ready i did this

  firstPage= "tabs-pages"; 

  constructor(private platform: Platform, private router: Router) {
    
    this.platform.ready().then(() => {
        console.log("Platform ready!");
        // alert('Platform ready');
        this.router.navigate([this.firstPage]);
    });

  }

Note: the issue disappears when i load normal page at the start, i mean not the tabs module.

I don’t know if there any problem with routings that causes the issue or its just an expected behaviour when working with tabs.

Anyone have a hint on how i could solve this issue, Thank you in advance :slight_smile:

2

Facing the same issue. Were you able to solve it?

3

Hi @dev-3s & @asifnkhan,

add the following to your capacitor.config.ts file:

  plugins: {
    SplashScreen: {
      launchAutoHide: false
    }
  }

Then call SplashScreen.hide(); in your app.component.ts file on the end of ngOnInit(). Also move everything you call in contructor to ngOnInit().

More Information: