Removing root page from NavController

Ionic Framework ionic-v3
1

I’m having trouble with removing the root page from a NavController and having back buttons incorrectly displayed. I have the following navigation hierarchy:

Welcome Page --> Page2 —> Page3 —> Page4

The welcome page is displayed if the user is unauthenticated. The user should not be able to return to the welcome page after they’ve logged in and Page2 should become the new root. The user can log in with a modal from page 2, 3, or 4. After using the modal to login, the user should remain on whatever page they’re currently on but should only be able to navigate as far back as Page2.

My app.component.ts:

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform, MenuController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Observable } from "rxjs";

import { UserServiceProvider } from '../providers/user-service/user-service'

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = "WelcomePage";
  loginObservable: Observable <boolean> ;

  constructor(
    public platform: Platform,
    public statusBar: StatusBar,
    public splashScreen: SplashScreen,
    public menuCtrl: MenuController,
    public userService: UserServiceProvider) {

    this.loginObservable = userService.isLoggedIn();
    this.initializeApp();
  }

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

      this.loginObservable.subscribe(isLoggedIn => {
           this.nav.remove(0);
      })

    });
  }

  ....

}

This works and actually removes WelcomePage from the navigation stack but the back button is still displayed in the header of Page2 (and oddly enough, the side menu correctly displays on Page2 next to the back button). Using the back button on Page2 returns the error “Uncaught (in promise): navigation stack needs at least one root page”.

It should be noted that the above code does work as expected if any view other than the root view is removed.

I’ve also attempted to use:

      //this.nav.getActive() is Page4
      this.loginObservable.subscribe(isLoggedIn => {
            let views = this.nav.getViews();
            views.shift();

            console.log(views); // Array<ViewController> [Page2, Page3, Page4]

            this.nav.setPages(views).then(() => {
               console.log(this.nav.getViews()) 
              // Array<ViewController> [Page4] (what happened to Page2 and Page3????)
            });
      })

but this makes the back button on any of the pages return “Uncaught (in promise): navigation stack needs at least one root page”.

1 Like
2

For a welcome page I would suggest using a modal. They are made for this stuff…
Once destroyed you cannot go back to it :slight_smile:

So, just navigate to your home page and on ionViewDidLoad (happens only once) display the welcome modal.
Once dismissed user will be on the proper page without back buttons!

good luck!

EDIT: I now see you want to display it after auth. So: do not disaply the modal in ionViewDidLoad, but on ionViewWillEnter or something, and check auth there