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

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.

I'm experiencing the same issue but in my case I can't even get redirected after login.

If I'm already logged and land in the login view, nav.setRoot(TabsPage) is executed perfectly.

But if I log-in with facebook after getting the user probile nav.setRoot(TabsPage) is doing nothing. Moreover, nav.push(TabsPage) is also doing nothing, but if I do nav.push(Main) where Main is one of my tabs, is executing correctly, but I don't have tabbar and a back button appears, obviously.

Also if I do nav.setRoot(Main) it works correctly, but I land in a tab without tabbar and with back button.

I add some information. I saw in the docs that setRoot return a promise, so I did this:

this.nav.setRoot(TabsPage)
  .then(data => {
      console.log(data);
  }, (error) => {
      console.log(error);
  })

This throws true when I land on the login page and I'm already logged, but throws nothing when I login with facebook, so it seems that the promise is never resolved.

Ok, another update. If you go to the core of Ionic2 to components/nav/nav-controller.js in the function setPages which is called from setRoot the callback of the transition is never been executed.
If you follow the flow of functions called: setRoot -> setPages -> _transition -> _render -> _postRender

In the _render function:

this.loadPage(enteringView, null, opts, function () {
    if (enteringView.onReady) {
        // this entering view needs to wait for it to be ready
        // this is used by Tabs to wait for the first page of
        // the first selected tab to be loaded
        enteringView.onReady(function () {
            enteringView.loaded();
            _this._postRender(transId, enteringView, leavingView, isAlreadyTransitioning, opts, done);
        });
    }
    else {
        enteringView.loaded();
        _this._postRender(transId, enteringView, leavingView, isAlreadyTransitioning, opts, done);
    }
});

My code enters in enteringView.onReady and the callback is never executed.

If I just call the _postRender method before waiting for enteringView.onReady my app works fine, but It's so dirty.
The problem seems to be waiting for the page of the tab to be ready. I think it never gets ready or never acquire fine the ready state.

Could be this something with my code? Or is likely to be a bug?

Thank you!

I have the same problem with Google or Facebook auth

@privetr this seems to have been fixed with beta4. Can you please check ? Mine is working fine now.

@jorchg Can you check as well ? when you get a chance :)

Hello all! As it looks like this was fixed in beta.4 i will be closing this issue, but if you are still having this issue feel free to comment!

I am still having this issue. I can't get the nav to push or setRoot to my TabsPage after a Facebook login promise.

Cordova CLI: 6.1.1
Gulp version:  CLI version 1.2.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.4
Ionic CLI Version: 2.0.0-beta.24
Ionic App Lib Version: 2.0.0-beta.14
ios-deploy version: 1.8.5
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v5.9.1
Xcode version: Xcode 7.3 Build version 7D175

I also am experiencing the situation where if I call nav.setRoot(x), the new page doesn't actually appear. Yet, if I focus an input field in the current page, it disappears and shows the correct page.

Additionally, if I push onto the stack instead of setRoot, the animation doesn't happen until I focus an input field.

Same problem.

Edit: Just swapped out the navigation in my app to a sidemenu and everything is working fine. So the tabs are borked as of beta 4 FYI.

@daveshirman are you using tabs to navigate around ? It might be related to tabs, my issue was related to sidemenu. However they both use the navcontroller, not sure why it would work for me and not for you.. Maybe produce a plunker or open a new issue and the ionic team will be able to help out.

I was having the same issue : nav.setRoot(MyComponent) did not seem to do anything. I was running the app in Android using --live-reload, and there were warnings about some events not being fired :

0     195445   log      deviceready has not fired after 5 seconds.
1     195457   log      Channel not fired: onDOMContentLoaded

I also could not test the code in the browser because it's about displaying a certain page when the device goes offline.

So I finally tried to run my code in Android, but without the live reload, and it works fine.

So, there is something about the live reload mode that is preventing it from working. Using Beta4 as my dependency, and the CLI version 2.0.0-beta25.

I have the issue like this: Tabs persist after logging out of app, start stacking on log in

I'm still experiencing the issue I described. I completely forgot, and after a ionic update it stopped working, so I just modified it again as described in my latest post in this thread.

Should I open another issue?

Hi Everyone. Did anyone find a fix for this? I am currently using Ionic [email protected] and the problem is still present!

I found the cause for my issue was calling .pop() when only setRoot had been called.

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

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

Also breaks when there's a modal window showing too.
On 13 Jul 2016 3:59 a.m., "scorpnode" [email protected] 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
.

Hi, this is still occurring to me in 2.0.0-beta.10. I'm getting a blank screen after calling NavController.setRoot. Only occurring on iOS devices

device info:

• model: iPad5,4
• iOS version: 8.3

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

CLI v2.0.0-beta.32.

Still having issues with
this.nav.setRoot(ListPage)
from hello-ionic.ts of the starter tutorial app.

I wanted to try FB login which has been made effortless with v2.

Anyone else?

[Edit]
I was using
import {Nav} from 'ionic-angular';
instead of
import {NavController} from 'ionic-angular';

Resolved my issue. Hope that helps anyone

Having the same issue here!
Is there any fix as of now?

Hello everyone, if someone could provide a plunker that demonstrates this issue that would be awesome. Thanks for using Ionic!

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!

Sorry for not answering, I was on Holidays 💃

My problem seems to have been related to cordova-plugin-facebook4 https://github.com/jeduan/cordova-plugin-facebook4

When I updated my project to beta.10 and started using Facebook wrapper from ionic-native the problem just stopped. Very strange, taking into account that the wrapper uses the same plugin.

Thank you very much!

No problem, glad its fixed for you!

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 filed a new issue for this #7593. Applicable to 2.0.0-beta.10 and 11, possibly others.

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.

I see exactly the same behaviour as @Troknus regarding double page popping and DOM confusion.

Also first time setRoot, then upon next navigation, the initial root page flickers up, as if it wasn't completely unloaded before.

I have the @Troknus issue too I try to adding show-page class manually and function but is not good solution.

I search in all sites but nothing. I try all possible solutions but all is in vane.

in beta 10. The navigation runs perfectly. Why not in beta 11.

I'm seeing the same behaviour as @Troknus too.

Guys, having same problem as @jorchg said.. considering the tabs error.. it just push to tabs after second time it calls (seems that the push occurs but the current page still on top)

after login if I try to push to tabs view but do not wotk.. if i push to a page that is supposed to be in a tab.. it works.. here is the project

• https://github.com/mariohmol/ionic2-meteor-messenger

I have the same problem as @Troknus

@schaergeek updated to beta 11 and it worked.. here is the example https://github.com/mariohmol/ionic2-meteor-messenger-password

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...).

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.

Actually, I just read @jgw96's comment and it seems you're not supposed to use random NavController instances...?

Still, that doesn't change the fact that there is a bug with the Z-indices.

same problem here with beta11...

Does anyone have a different plnkr that will reproduce the DOM getting confused or pages flickering? The plnkr by @joshgarwood doesn't include pushes or pops.

@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;
  }
}

@Vanclief Have same problem - but even this solution you've proposed didn't work for me.
My code was as yours to begin with - then I tried upgrading to ionic 2 rc0 and angular 2.0.1, but that didn't work well with firebase (nor angularfire), so I rolled back to:

{
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "^0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "^2.0.0-rc.2",
    "firebase": "^3.3.0",
    "ionic-angular": "2.0.0-beta.11",
    "ionic-native": "1.2.2"
}

deleted node_modules/ did npm install and now I'm facing this problem.

The weird this is if I set this.rootPage to something outside of the callback function, then the app navigates to that page. E.g.

        this.setRoot(TeamPage);

        firebase.initializeApp(this.firebaseConfig);
        firebase.auth().onAuthStateChanged(user => {
            if (user) {
                this.setRoot(TeamPage); // If there's a user take him to the Teams page.
            } else {
                this.setRoot(LoginPage);  // If there's no user logged in send him to the LoginPage
            }
        });

Will navigate the user the TeamPage then navigate the user to the LoginPage (in cases where the user isn't logged in)

However

        firebase.initializeApp(this.firebaseConfig);
        firebase.auth().onAuthStateChanged(user => {
            if (user) {
                this.setRoot(TeamPage); // If there's a user take him to the Teams page.
            } else {
                this.setRoot(LoginPage);  // If there's no user logged in send him to the LoginPage
            }
        });

Will never navigate the user anywhere

@Peter-Piper

I did not update, but I kept having some problems that went away once I upgraded to RC0. For one of my projects Im also using firebase and had some problems updating but now everything is working.

I do not use AngularFire, but this tutorial covers it: https://playcode.org/getting-started-with-ionic-2-rc0-firebase-3-angularfire-2/

EDIT: Here is a quick example I made

@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.

This is still a problem. Using this.nav.push(...) works fine, but using this.nav.setRoot(...) does not work after the first time. Here's my ionic info:

Your system information:

Cordova CLI: 6.3.1
Gulp version:  CLI version 3.9.1
Gulp local:  
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS: Distributor ID: Ubuntu Description: Ubuntu 16.04.1 LTS 
Node Version: v4.6.0

From package.json

  "dependencies": {
    "@ionic/storage": "^1.0.3",
    "firebase": "^3.4.1",
    "ionic-angular": "^2.0.0-rc.0",
    "ionic-native": "^2.2.2",
    "ionicons": "^3.0.0"
  },

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

@daveshirman, i was facing the same problem, it is not a navigation problem, but here is how i solved it.

in my app.ts is have this

firebase.initializeApp(config);

platform.ready().then(() => {
  firebase.auth().onAuthStateChanged((user) => {
    if (user) {
      // If there's a user take him to the TabsPage page.
      this.rootPage = TabsPage;
    } else {
      // If there's no user logged in send him to the LoginPage
      this.rootPage = LoginPage;
    }
  });
  // Okay, so the platform is ready and our plugins are available.
  // Here you can do any higher level native things you might need.
  StatusBar.styleDefault();
});

the if statement above is saying // If there's a user SET THE ROOTPAGE TO TabsPage page.
and else it should remain in the LoginPage, you will note that if you use normal firebase login method, the if part will execute (i.e it will navigate to the rootPage, but when using Facebook the else part will execute (i.e it stays on the LoginPage

I solved it like this.
facebookLogin() {

//sign in to facebook
Facebook.login(['email']).then((result=>{
// set credentials, you will use this to sign in to firebase
let credentials = firebase.auth.FacebookAuthProvider'credential'
// sign in to firebase, this is what is preventing the navigation to work, leading to the ELSE path of the //statement in the app.ts to execute
return firebase.auth().signInWithCredential(credentials);
})).then((user)=>{
//alert(firebase.auth().currentUser.uid);
this.userProfileRef.child(firebase.auth().currentUser.uid).set({
id:firebase.auth().currentUser.uid,
email: user.email,
displayName:user.displayName,
profilePictureURL:user.photoURL
});

   this.navCtrl.setRoot(TabsPage);
}).catch((error)=>{
  alert(error);
})

}

what happened in the code above is that,
1st you need to login to facebook, which i did with
Facebook.login(['email']).then((result=>

2nd you need to set a credentials that will help you login to the firebase using the accessToken sent to you by Facebook login result which is what i did here
let credentials = firebase.auth.FacebookAuthProvider'credential';
3rd you need to login to firebase with credentials you set, which is what i did here
return firebase.auth().signInWithCredential(credentials);
NOTE: this the exact reason why your this.navCtrl.setRoot(TabsPage); did not work (because the user is yet to login on firebase.

so you can now navigate to the rootPath at the then() path of the code.

and please kindly make sure you your facebook appId and appSecrete is configured on firebase>authentication>facebook panel.

HOPE THIS HELP

@OyebisiJemil Thanks for your long explanation of what you did. But I meant I was having the same problem conceptually in that setRoot doesn't work properly, not with using facebook or anything. Thanks again though. This issue shouldn't be closed, unless there is another open with the same description.

Which apparently there is:

https://github.com/driftyco/ionic/issues/8453

I'm also hitting this issue with very similar circumstances. In my case switching to push(view) instead of setRoot(view) resolved the problem and doesn't really jack with my app flow.

I have the same issue. nav.push(view) works fine but nav.setRoot does not work. Anyone got any suggestions?

I'm still facing same issue as of today in latest build:

logOut() {
this.authData.logoutUser().then(() => {
this.nav.setRoot(LoginPage);
});
}

does NOT work. Plz help. Thnx. Lis

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.

@dejancencelj that is not a solution to this issue.

@lisaiceland to get around this problem I followed this suggestion:
https://forum.ionicframework.com/t/cant-access-rootnav-after-upgrade-to-beta-11/59889/15?u=niallr

@niallr12 @daveshirman is this still an issue in RC3?

@manucorporat I am unsure if this is a problem in RC3 but I don't see a fix for it in the changelog. I am happy with my fix and feel it is an overall better approach anyways.

I can test for you in RC3 if you like.

@niallr12 well, I never was able to reproduce this particular problem. But I have spend weeks hardening NavController, with tons of little fixes and tests. Like this one: Worst Case that stresses the navigation stack with a crazy flow.

I would be very helpful if you can test this bug against RC3.

@manucorporat I can still replicate the problem in rc3. In my particular case it doesn't seem to be dismissing the current view when I am setting root. If I dismiss the current view and then set root it works fine. Pushing the view works completely fine.

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.

Why is this issues closed? I have same problem. I'm using setRoot function in my sample provider. App setRoot and changed page but navigation (menu) is disabled when finished.

It's my code in provider

private _leaveGroup(user: modelUser, room: modelRoom): Promise<any> {
    return new Promise((resolve, reject) => {
      let loading = this.loadingCtrl.create({dismissOnPageChange: false});
      loading.present();

      this.ref.child(room.id).child('users').child(user.id).remove()
        .then(() => this.navCtrl.setRoot(PageDashboard))
        .then(() => loading.dismiss())
        .then(() => resolve())
        .catch(err => loading.dismiss().then(() => reject(err)));
    });
}

It's my info

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.4
Ionic App Lib Version: 2.1.2
Ionic App Scripts Version: 0.0.45
ios-deploy version: 1.9.0
ios-sim version: 5.0.9
OS: Mac OS X Sierra
Node Version: v6.9.1
Xcode version: Xcode 8.1 Build version 8B62

I had same problem. However after I ensured that at any given time if only setrroot statement is executed everything worked perfect. But for various reason if multiple setroot statements are executed at any given time i.e. before rendering, Ionic is creating multiple pages dues to which the navigation is getting hanged in my case.

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

Hi Everyone. Did anyone find a fix for this? I am currently using Ionic 2.0.0-rc.4 and the problem is still present!

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!

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

Has anyone found at least a workaround to this ?

Same issue as @joshuaohana.

If I do setRoot BEFORE facebook login, everything works as expected.
If I do setRoot AFTER facebook, I get the same behaviour as @joshuaohana.

Thanks.

(Just found this duplicate : https://github.com/driftyco/ionic/issues/6297)

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

}
...

Maybe some of you made the same mistake as me:

I used navigation via "setRoot" but missed that at the same time the binding "[root]=.." is still available on the HTML template. Bringing the two infos in synch again fixed my problem. In this case i removed the model binding and managed the root only via API.

Regards, Michael

Hi guys,

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

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

@AmitPoojary That solution has not worked. When the user goes to multiple tabs.

Example: Home tab with multiple pages. When the user clicks through to the multiple pages. Then doesn't go back but switches over to Account tab & then logs out it will stay on the Account tab until refresh.

I've figured out if the user clicks on the Home tab & doesn't go any further it will log the user out correctly.

I'm thinking it's all about getting to many tabs in the dom & getRootNav isn't going back that far when the user goes in to the second page in the home tab.

This is still an issue.

Yes, still an issue for me as Im using Tab's as the main landing page of application. By calling _navCtrl.setRoot() from any of the pages inside the tabComponent, only that page is set to rootPage but the tab interface at the bottom stays in place. This allows me to still access other pages in the tab!

The right solution to this is:

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

or one line

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

I also have similar problem on my new app, my application is working only first push to the device, where I make socket connection and perform some socket communication. I kill the app, disconnect from the from my development computer, re-run the application, I did not see no connectivity activity on server side. I have not implement uiktiomasfeliz recommendation, I will try that later today. But just an heads up.

Yes. I also accomplished the same with:

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

However, it breaks the images paths on devices...

(getRootNav) is deprecated and will be removed in the next major release. Use getRootNavById instead.

So... this error was never fixed and the previous patch is not working anymore.. :/

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

This is not woking for me...

this was resolved with release 3.5.3 for me at least

welp, 3.5.3 did not fix it for me.

guys and still having this problem sidebar not working after setRoot();

i only use this : this.navCtrl.setRoot(HomePage);

I tried all solution here but still having this problem
Ionic 3.10.3

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");

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.

Hi @alemdg I think it is the way in which you are calling the routes, for example if you define like a text or like a object, whatever,

if you want to avoid problems, call like a text ( "HomePage" ) and create this variable

const root = this.app.getRootNav();

and call the following method

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

import this object

import { IonicPage, NavController, NavParams, Nav, App } from 'ionic-angular';

constructor(
public app: App
) {

first is the popToRoot and second define new root ;)

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

// this line DOES NOTHING and no error is thrown.
root.popToRoot();
root.setRoot( "HomePage" );
}

this also DOES NOT WORK

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

@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....

I am seeing this on 3.7.1.

Use the following code it must work or give you an error message

this.menu.close();
this.nav.setRoot(HomePage).then(()=>{
this.nav.popToRoot();
}).catch(err=>{
alert(err.toString());
});

Hi @FatehiAlqadasi, thanks.
An error is thrown, here is the log.

err:
C@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:7:21236
file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:7:21702
file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:7:21967
reduce@[native code]
O@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:7:21927
format@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:8:12952
transform@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:8:14339
Ce@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:3:23348
Ie@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:4:1046
Te@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:4:518
no@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:4:5140
file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:42:25653
updateRenderer@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:4:4409
Se@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:4:328
We@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:4:3041
Ge@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:4:2439
Se@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:4:336
detectChanges@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:6:5799
_viewAttachToDOM@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:17:22059
_transition@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:17:23173
file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:17:19213
invoke@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/polyfills.js:3:9288
onInvoke@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:5:1143
invoke@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/polyfills.js:3:9231
run@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/polyfills.js:3:4458
file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/polyfills.js:3:14079
invokeTask@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/polyfills.js:3:9972
onInvokeTask@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:5:1047
invokeTask@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/polyfills.js:3:9900
runTask@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/polyfills.js:3:5153
o@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/polyfills.js:3:2210
invoke@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/polyfills.js:3:10986
err:
C@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:7:21236
file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:7:21702
file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:7:21967
reduce@[native code]
O@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:7:21927
format@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:8:12952
transform@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:8:14339
Ce@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:3:23348
Ie@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:4:1046
Te@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:4:518
no@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:4:5140
file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:42:25653
updateRenderer@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:4:4409
Se@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:4:328
We@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:4:3041
Ge@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:4:2439
Se@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:4:336
detectChanges@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:6:5799
_viewAttachToDOM@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:17:22059
_transition@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:17:23173
file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:17:19213
invoke@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/polyfills.js:3:9288
onInvoke@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:5:1143
invoke@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/polyfills.js:3:9231
run@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/polyfills.js:3:4458
file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/polyfills.js:3:14079
invokeTask@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/polyfills.js:3:9972
onInvokeTask@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:5:1047
invokeTask@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/polyfills.js:3:9900
runTask@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/polyfills.js:3:5153
o@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/polyfills.js:3:2210
invoke@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/polyfills.js:3:10986
dispatchEvent@[native code]
handleTapPolyfill@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:18:6423
pointerEnd@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:18:5144
[native code]
handleTouchEnd@file:///var/containers/Bundle/Application/B7F05CCA-3B74-4F26-A691-B0D9F669E526/SGI.app/www/build/main.js:19:19943
[native code]

@tonyawad88
This fixed the issue

logout(){
this.navCtrl.setRoot("LoginPage");
this.navCtrl.push("LoginPage");

}

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

Hello all,

I can get all my data from the root page also navigate but can't navigate the page out of tabs, its open like a child of tabs.

Tried all possibilities to solve it but no operation works.

Tab page where my data.

After clicking on the fetched data it will redirect to the detail page of the data, it was redirect but inside the tab page. like this...

help me out,

Thanks in Advance.

I have noticed this bug as of [email protected]. It seems to be associated with the DeepLinkConfig, because if I remove that from my app.module then I can call nav.setRoot() all day long without issues. My hypothesis is that, after subsequent calls of of setRoot(), the deep link logic gets into a state where the nav stack changes before window.location, the deep link code sees that window.location points to a page that is not on the stack (because you've setRoot() away from it), and so it returns you to the page you just tried to nav away from.

Regardless, here is a workaround that works for me.

await this.nav.push(page, params);
this.nav.remove(0, this.nav.length() - 1);

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.

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

This is the way I found to set a new nav stack and removing the old nav stack. This was done for ion-angular 3.9.2

this.navCtrl.remove(0, this.navCtrl.length() - 1);
this.navCtrl.insert(0, MainPage);
this.navCtrl.pop();

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.