Ionic 4 : Setting root page

Question

In Ionic 4 I couldn't find a suitable way to replace the default root page after the splash screen. Following is the default setup.

this.platform.ready().then(() => {
  this.statusBar.styleDefault();
  this.splashScreen.hide();
});

Answer 1

Found the solution. First create the page you want to make as root page

 ionic generate page pagename

In app.component.ts

 import { Router } from '@angular/router';

Inside the constructor add

 private router : Router

and then initialize

 initializeApp() {
     this.platform.ready().then(() => {
       this.router.navigateByUrl('pagename');
       this.statusBar.styleDefault();
       this.splashScreen.hide();
     });
 }

Answer 2

I would not suggest using this method.

although this works, Ionic 4 now relies on Native Angular Modules, this includes the Angular Router.

to set a root page, you would be required to set your app routes in the router module.

if you do not know how this is done, please click here to visit the angular docs

when you create a project with the ionic cli, the routing module is added for you automatically.

Here is how to implement such in your case;

step 1:

in your index.html

check if the <base href="/" > has been added to the index.html file, if it's not there please add it.

step2:

in your app.module.ts file

at the top of the file, import the routerModule

import { RouterModule, Routes } from '@angular/router';

configure your app routes, assuming you have already created a page named 'home'

const routes: Routes = [
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: 'home',
loadChildren: './home/home.module#HomePageModule'
}
];

add the RouterModule to the imports array of the NgModule

@NgModule({
imports: [RouterModule.forRoot(routes)],
...
})

step 3:

in your app.component.html

add the router-outlet to the app.component.html <ion-router-outlet></ion-router-outlet>

Answer 3

If you have a Angular Router this is the procedure:

in app.component:

Add imports:

import {NavController} from '@ionic/angular';
import {ActivatedRoute} from '@angular/router';

// in the constructor:

  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private route: ActivatedRoute,
    private navController: NavController,
...

  ) {
    this.initializeApp();
....
    if ( this.route.snapshot['_routerState'].url !== '/theRoute') {
         this.navController.navigateRoot('/theRoute')
           .then();
    }
....

Thats all.

This valid your logic and redirect, but, if You are in the same page, dont redirect.