CODEWITHSUNDEEP
angularionic-frameworkionic4
athulpraj
athulpraj

Reputation: 1577

Ionic 4 : Setting root page

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();
});

Upvotes: 8

Views: 22505

Answers (5)

Elavarasan r
Elavarasan r

Reputation: 1285

I found the solution. Given below

1.For Rooting:

app.component.ts

import { Component } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  rootPage: any = 'register'; //<--- Just change the 'register' into your page name
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private router : Router
  ) {

    this.initializeApp();
  }

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

}

2. For Navigating:

For just navigating to another page, use below code

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

Upvotes: 0

Argo
Argo

Reputation: 335

In Ionic 3 we had push, pop & setRoot methods in NavController for Routing used as follows:

this.navCtrl.push('list');
this.navCtrl.pop('home');
this.navCtrl.setRoot('HomePage');

These are now changed to

this.navCtrl.navigateForward('/list');
this.navCtrl.navigateBack('/home');
this.navCtrl.navigateRoot('/details');

Upvotes: 1

gabrielrincon
gabrielrincon

Reputation: 896

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.

Upvotes: 1

Triple0t
Triple0t

Reputation: 444

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>

Upvotes: 7

athulpraj
athulpraj

Reputation: 1577

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();
     });
 }

Upvotes: 12

Related Questions