ionic-framework: Ionic2 - nav.setRoot(Component) - Works only first time, unable to navigate after, no errors reported

Hello all! As it seems it has been a while since there was any activity on this issue i will be closing it for now. Feel free to comment if you are still running into this issue. Thanks for using Ionic!

Why is this issue closed? Navigation seems really broken. If i push a page with forms in it it wont work either.

First, import Nav from ionic-angular, same place as navController import { App, NavController } from 'ionic-angular';

then provide it in your constructor : constructor(public navCtrl: NavController, public appCtrl: App)

now you can acces the rootnav: this.appCtrl.getRootNav().setRoot(YourComponent);

Use push insted of setRoot…

@jgw96, @adamdbradley this is still a major issue. Please reopen it and assign a milestone. Many people are having this issue, including myself and it’s essential functionality for an app.

I am facing this issue in 2.0.0-beta.10. I’m not able to navigate to next page by NavController.setRoot. My code looks like this:

this.nav.setRoot(somepage).then(() =>{
     this.nav.popToRoot();
});

device info:

• model: motorala x play
• android version: 6

Seems this issue mutated to something stranger in RC4. Same type of issue except that when setting root now from the exampled login page to a menu/dashboard the login page remains in the view stack which displays the back button in the header, causing all kinds of mayham

I am forced to do a location.reload to account for this which I guess isn’t a terrible user experience as it only happens during new user registration, but still… I don’t understand why this issue is closed as lots of people are still having the problem.

I have the same problem with beta 11. Navigation seems to work well until this.nav.setRoot(xxx) is called. After that, navigation works randomly… When pushing a new page, sometimes nothing happens : the view stay on the current page instead of the new one. When poping, navigation seems other times to pop twice. Everything seems to be correct with the NavController object and everything fires normally. But it seems there is confusion in the DOM : values of z-index properties for ion-page tags are wrong in these cases, so that the wrong page stays above.

2 years old bug, still nobody dare to fix it… I’m having the same issue in Ionic 3

@jgw96 Why is this closed? Clearly this is an open case as setRoot is not working properly.

I did thumbs up on Troknus, but i think a post is more clear.

This navigation is a real problem. We (and I suppose a lot of other poeple) are not allowed to move in production with this bug. (We are working in beta 11 as Troknus and we have the same…).

Hi guys,

@ly-dev solution worked for me. I just did this._app.getRootNav().setRoot(EntryPage); and it works.

Hi,

//import these classes
import { Component, ViewChild } from '@angular/core';
import { Platform, MenuController, Nav } from 'ionic-angular';

export class MyApp {
  //Set this property
  @ViewChild(Nav) nav: Nav;

  //implement this method, and works perfectly
  private openPage(page: any): any {
    //validate token 
    this.loggedIn = this.service.canActivate();
    if (!this.loggedIn) {
      //not logged 
      this.nav.setRoot(LoginPage);
    } else {
      //logged
      this.nav.setRoot(HomePage);
    }
    this.menuCtrl.close();
  }

Hugs!

I filed a new issue for this #7593. Applicable to 2.0.0-beta.10 and 11, possibly others.

I noticed the following: 2 ion pages are present at once in the dom.

The one I navigated to is “explore” which has a lower z-index(92) than the “featured” page. Therefore I should be on explore but the “featured” is overlayed on top of “explore” with a z-index of 93.

@spidermay Thanks for the answer but still not working.

I imported import { IonicPage, NavController, NavParams, Nav, App } from ‘ionic-angular’;

and executed const root = this.app.getRootNav(); root.popToRoot(); root.setRoot(“HomePage”);

but if i click the button twice it works…

is like some refresh is missing…

The right solution to this is:

let _nav = this.app.getRootNav(); _nav.setRoot(LoginPage);

or one line

this.app.getRootNav().setRoot(LoginPage);

My App: https://github.com/siteslave/chiangmai-demo-app/blob/master/src/pages/main/main.ts#L96-L100

import {
  ...
  App,
  ...
} from 'ionic-angular';

//=====================//
 logout() {
    localStorage.removeItem('token');
    let nav = this.app.getRootNav(); 
    nav.setRoot(LoginPage);
  }

I create event for logout.

// app.component.ts
events.subscribe('logout', () => {
  localStorage.removeItem('token');
  this.rootPage = LoginPage;
 });

now logout:

// pages/home/home.ts
  logout() {
    this.events.publish('logout');
  }

Hey,

I’m not sure whether my answer will help anybody since I have not read all previous messages, but when I encountered on such issue in my project I resolved it by referring to parent navigation stack, for that reason I was able to move back to welcome page e.g:

Welcome page (root page)

gotoFeature(): void {
  this.navCtrl.push(feature);
}

Feature page (with tabs)

logout(): void {
  this.navCtrl.parent.parent.pop() //  back to welcome
}

It needs to be handled in that way since tabs have their own navigation stack what means that every use of setRoot in tabs navigation object level will redirect to different page but tabs block in footer would be still visible.

Hey @jgw96 ! Unfortunately this still seems to be a problem for me in Beta 10. You can see this in the plnkr below. Effectively, I have a login modal that sets the root to a “Tabs” page once successfully logged in. From a page in the “Tabs” i have a “Logout” button, which fires an event that is consumed in app.ts. In app.ts I try to set the root to the “LoginPage”, but nothing seems to happen. In looking at the DOM while clicking “logout” I can see things firing, and the login page exists underneath the tabs, but the navigation just doesn’t seem to occur. Any ideas?

http://plnkr.co/edit/n6jCzspnEcjQbl9KF10F

Thanks for your time!

I found that calling it from my app.ts seems to work reliably. Calling it from any other page seems to fail. Additionally, if I am not on a root page, like 3 pages deep, I also call nav.popToRoot() after the setRoot method, which works:

this.nav.setRoot(xxxx).then(() =>{
    this.nav.popToRoot();
    //....
});

Just leaving this here for posterity. This logout function seems to be working for me without any side-effects. Thanks to @uiktiomasfeliz.

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.1.2
Cordova Platforms  : android 6.3.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

System:

ios-deploy : 1.9.2
Node       : v8.9.1
npm        : 5.7.1
OS         : macOS High Sierra
Xcode      : Xcode 9.3 Build version 9E145

async logOut() {
    await this.authProvider.logout();
    await this.app.getRootNav().setRoot('LoginPage');
  }

Thank you so much @jknisley, I solved my issue with this.

detailEvent(eventItem) {
    this.app.getRootNav().push(DetailEventsPage, { itemUp: eventItem });  
  }

This code will redirect me to new page and diffrent layout(not under the tab page) too.

Hello, i am testing a the hello world app on an iPhone4 and some others devices with Android.

Last Ionic and CLI version.

The main huge problem is with the iPhone, the call to setRoot is not working.

void onGoClick(){ // this line DOES NOTHING and no error is thrown. this.navCtrl.setRoot(HomePage);

// this line DOES NOTHING and no error is thrown. this.app.getRootNav().setRoot(HomePage); }

this also DOES NOT WORK

var root = this.appCtrl.getRootNav(); root.setRoot( HomePage ); root.popToRoot();

regards.

i solved like that

import App

import { IonicPage, NavController, Nav, App } from ‘ionic-angular’;

AND now use

const root = this.app.getRootNav();
root.popToRoot();
root.setRoot("LoginPage"); 

This is still an issue.

create event for logout works.

also, find below a detail explanation about nav with another working solution

https://webcake.co/exploring-nav-hierarchy-in-the-ionic-2-tabs-page/

most valuable piece of the code pasted below.

import { App } from ‘ionic-angular’; … constructor(private _app: App) {}

logout() { …

    // Now I'll access the root NavController for the app,
    // and use that to reset the nav stack

    const root = this._app.getRootNav();
    root.popToRoot();

    // since I only have two items in the root NavController,
    // I could also have run root.pop() instead

} …

Has anyone found at least a workaround to this ?

@Vanclief

Thanks, I did already try this approach - and it did work. But the fact that I have to do hacks in a node module combined with ionic RC_0 crashing when watching files when doing ionic serve made me abort upgrading and stick to the older version.

Anyways, I did solve the issue mentioned above where setting root page in a callback never works unless it has been set before, by checking if firbase.auth.currentUser is set and then setting the rootPage

        const page = firebase.auth().currentUser ? TeamPage : LoginPage;
        this.setRoot(page);

        firebase.auth().onAuthStateChanged(user => {
            // If there's a user take him to the Teams page otherwise send him to LoginPage
            const page = user ? TeamPage : LoginPage;
            this.setRoot(page);
        });

and then doing a check in the setRoot method so it doesn’t navigate to the same page twice.

This is also a hack and doesn’t address the underlying problem. Unfortunately I don’t have the time to go in to an in depth investigation of the issue the next week.

@rcjsuen Had the same problem in Beta10 & Beta11, I figured out this workaround. Not sure if setRoot is working as intended but this works for now.

Not working

  private initializeApp(): void {
    this.platform.ready().then(() => {

      firebase.auth().onAuthStateChanged(user => {
        if (user) {
          this.nav.setRoot(TabsPage);
        } else {
          this.nav.setRoot(LoginPage);
        }
      });

      StatusBar.styleDefault();
    });
  }
}

Working

 private initializeApp(): void {
    this.platform.ready().then(() => {

      firebase.auth().onAuthStateChanged(user => {
        if (user) {
          this.setRoot(TabsPage);
        } else {
          this.setRoot(LoginPage);
        }
      });

      StatusBar.styleDefault();
    });
  }

  private setRoot(newRootPage: any){
    this.rootPage = newRootPage;
  }
}

I took a look at the plnkr by @joshgarwood. The event publishing seems to be the issue? If instead of publishing the authentication event to have MyApp do the work, you instead set the root via the NavController instance within TabPage, then it works. Trying to set the root via the event listener in MyApp doesn’t. So it seems to me like an issue with the different NavController instances that are being injected…? I’m not sure how the DI is supposed to work here but I feel like the consumer shouldn’t have to care about which instance of NavController is injected. If I call setRoot(*) then things should just work, right?

Regarding the Z-index problem that @Troknus is talking about, you all may be interested in issue #8042. Though in that case setRoot(*) is not being called at all.

Also breaks when there’s a modal window showing too. On 13 Jul 2016 3:59 a.m., “scorpnode” notifications@github.com wrote:

Why is this issue closed? Navigation seems really broken. If i push a page with forms in it it wont work either.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/driftyco/ionic/issues/5883#issuecomment-232241198, or mute the thread https://github.com/notifications/unsubscribe/ANnlXmqTT5pf0i-JZNog5F32j8pB785Qks5qVFSZgaJpZM4H0Jz0 .

I have the same problem with Google or Facebook auth