Frozen ionic page after redirecting with navCtrl.setRoot(...)

[paoesco]

Short description of the problem:

The app freezes after redirecting the user.
Happening after navCtrl.setRoot(LoginPage);
I can't click on inputs or buttons. The page is completely blocked.

(Refreshing the browser makes the app working again).

What behavior are you expecting?

After logout or redirecting to a page, the user could be able to login again, without a frozen page.
User must not need to refresh the page in order to have his app working

Steps to reproduce:

1. Login with test@walkingdog.com / test
2. Navigate through pages (About / Contact)
3. Click on Logout in the menu
   => Login page frozen

Logout method in https://github.com/paoesco/walkingdog/blob/master/walkingdog-mobile/src/app/app.component.ts

    logout() {
        console.log(`User logged out`)
        this.auth.logout();
        this.navCtrl.setRoot(LoginPage).then(data => {
                  console.log(`Data is ${data}`);
              }, (error) => {
                  console.log(`Error is ${error}`);
              });
}

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)
Link to the repository :
https://github.com/paoesco/walkingdog/tree/master/walkingdog-mobile

Ionic forum post :
https://forum.ionicframework.com/t/ionic-2-page-freeze-after-navctrl-setroot-loginpage/65237

Which Ionic Version? 1.x or 2.x
2.1.0-beta.1

Plunker that shows an example of your issue

Just checkout walkingdog-mobile, run npm install and ionic serve

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: Not installed
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS:
Node Version: v4.4.7

Browser : Firefox

Thanks for the support

[jgw96]

Hello, thanks for using Ionic! Can you try a quick test and move the logout method to another component besides app.component?

[paoesco]

Great ! Working!

But I don't really understand why logout method and redirect to login page from app component doesn't work.

According to the side menu template (https://github.com/driftyco/ionic2-starter-sidemenu/tree/master/src), side menu template is located in app.component so it should be 'logical' that the behaviour of the side menu is managed by app.component.

How can I have a working logout entry in side menu ?

Should this method handling be fixed in Ionic 2 ?

Thanks

[daveshirman]

@jgw96 I don't understand your comment "app.component is meant to be the root containing component of an app and should not have a template."

Even the starter example has a template associated with the app.component.ts.

E.g. How are we supposed to throw a logout event that does a setRoot(LoginPage) from anywhere in our apps to throw the user back to a login page?

If not registering the logout listener + function in the app.component, then where?

Please reply.

[jgw96]

@daveshirman Sorry, that was bad wording on my part. After reviewing this issue it is definitely a bug in the framework. Thanks!

[RoopeHakulinen]

Any news on this? Still experiencing this problem with RC2.

[rubenkuipers]

Having the same issue on RC2 here..

[jgw96]

Hello all! We have a good number of navigation fixes coming in the next release that should fix this. Thanks for your patience!

[RoopeHakulinen]

Thank you @jgw96 for your answer. Looking forward for RC3 :)

[pisix]

@jgw96 i'm still experiencing this problem with RC4, Any info on this?

[Ross-Rawlins]

I am still getting this issue in ionic 3. But I have resolved it.

[hendricius]

Is there any workaround for this?

[daveshirman]

I don't know about you guys, but i haven't had this happen for a long time now. I log out by publishing an event from my logout button.

That event is consumed in the app.component.ts, which does the setRoot.

Additionally, to call setRoot i do this:

this.app.getActiveNav().setRoot(LoginPage)

Hope this helps.

[Ross-Rawlins]

I resolved mine by breaking down my code. Turned out to be an asynchronous error.

[jgw96]

Hello all. As this seems to have been fixed I am going to close this issue for now.

[dev-mean]

I am still getting this issue :

[FallenRiteMonk]

@Ross-Rawlins could you explain a bit more in detail what exactly was your problem with the asynchronous error and how you fixed it?

[Ross-Rawlins]

it was caused by the page I was going to using async values in the template and it wasnt throwing an error. so either use the aysnc pipe or ? in front of your variables that are not defined. Its not IONIC trust me its human error causing this.

[FallenRiteMonk]

@Ross-Rawlins Thanks, that saved my day!!
Event though I didn't get the part with the "? in front of your variables". What does that mean/do?

[ionitron-bot]

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.