Ionic pop page not working

Question

I am quite new to Ionic and I struggle to go back to the previous page. Error Uncaught (in promise): navigation stack needs at least one root. However in login(), I push the TabsPage above the root (LoginPage). With pop() I would like to go back to LoginPage.

I would be glad if you could help.

Here is my code:

myApp.ts:

export class MyApp {
  rootPage:any = 'LoginPage';

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

login.ts:

public login() { 
    this.showLoading()
    this.auth.login(this.registerCredentials).subscribe(allowed => {
      if (allowed) {        
        this.nav.push(TabsPage);
      } else {
        this.showError("Email ou mot de passe incorrect");
      }
    },
      error => {
        this.showError(error);
      });
  }

tabs:

export class TabsPage {

  tab1Root = OrdersPage;
  tab2Root = AboutPage;
  tab3Root = ProfilePage;

  /**
   * @constructor
   */
  constructor(private navCtrl: NavController) {}
}

profile.ts:

    public logout(){
      this.auth.logout().subscribe(logedout => {
          if(logedout){
              this.navCtrl.pop();
          }
      });
  }

Thank you.

I see tab3Root = ProfilePage;. Does that mean you then set the root to Profile ? If yes, then it's the reason why you can't go back using pop : Profile is now the root. — Kewin Dousse

Suraj Rao Suraj Rao · Accepted Answer · 2017-11-20T09:16:43

The issue is You are trying to pop from a tab root page. In Ionic Tabs, each tab is the root of its own navigation stack. You will need to set LoginPage as root using the application NavController.

In profile.ts,

 import { App } from ionic-angular;


constructor(private app:App){}

public logout(){
  this.auth.logout().subscribe(logedout => {
      if(logedout){
          this.app.getRootNav().setRoot(LoginPage);
      }
  });
}

ALSO, you need to set TabsPage as root from LoginPage to avoid user pressing back and getting back to Loginpage.

 if (allowed) {        
    this.nav.setRoot(TabsPage);//here
  } else {
    this.showError("Email ou mot de passe incorrect");
  }

Ionic pop page not working

1 Answers