How to set rootPage in IONIC 4

Question

This is what i have now and really can't seem to find the right answer to my question i've looked everywhere so maybe someone that knows can help me?. How do i set RootPage like in ionic 3 into Ionic 4 because i tried everything and this is what is left with trying

import {Component, ViewChild} from '@angular/core';
import {NavController, 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';
import {GettingStartedPage} from './getting-started/getting-started.page';

@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
})

export class AppComponent {
@ViewChild(NavController) nav: NavController;
rootPage;


constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private NavCtrl: NavController) {
    this.initializeApp();
}

// Eindigt constructor

initializeApp() {
    this.platform.ready().then(() => {
        this.splashScreen.hide();
        // set status bar naar onze app kleur
        this.statusBar.backgroundColorByHexString('#E84B56');
    });
}

openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.rootPage.navigateRoot('/getting-started');

}
}

Answer 1

Since Ionic 4 you use the Angular Routing. If you want /getting-started to be your rootpage, go into the app-routing.module.ts and edit the routes. If you don't have on, create a Route that points to your Page and redirect the one with path: '' to /getting-started .

So a final app-routing.module.ts could be:

const routes: Routes = [
    {path: '', redirectTo: 'getting-startet', pathMatch: 'full'}, //Root Path redirect to your getting-started path
    {path: 'getting-started', loadChildren: './getting-started/getting-started.module#GettingStartedPageModule'}, // when hit the getting-startet path, load the page
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {
}

Answer 2

I hope the following helps you:

constructor(private nav: NavController){}

private setRoot(){
  this.nav.navigateRoot('/getting-started');
}

Answer 3

Ionic 4 uses routes to navigate. You can find configuration for routes in /src/app/app-routing.module.ts , even though you can still set it up in your app.module.ts file. Quoting the Ionic 4 documentation: , the most basic configuration looks a bit like this:

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

@NgModule({
  imports: [
  ...
  RouterModule.forRoot([
    { path: '', component: LoginComponent },
    { path: 'detail', component: DetailComponent },
  ])
  ],
})

The simplest breakdown for what we have here is a path/component lookup. When our app loads, the router kicks things off by reading the URL the user is trying to load. In our sample, our route looks for '', which is essentially our index route. So for this, we load the LoginComponent. Fairly straight forward.

If you want to load a different component on initial load, you should use redirects