Ionic2 Navigation Issue, view not updating (login page redirecting to a tabbed page)

Ionic Framework ionic-v3
1

Hi Guys,

I’m running an Ionic 2 beta.25 app, written in TypeScript. I’m fairly new to Ionic and Angular 2 but I doubt this is a syntax or code error. I’m not getting any errors in console just getting weird behaviour.

What I want to accomplish: From my login page, go the the home page which contains a tabs to 2 other pages. One page with content, the other page with profile information and a logout button.

In my app.ts I’ve set my LoginPage as the rootpage:

@App({
    template: '<ion-nav [root]="rootPage" id="nav"></ion-nav>',
    providers: ... Auth0 stuff 
})

export class MyApp {
    rootPage:any = LoginPage;
    
    constructor(private platform:Platform, private auth:AuthService) {
        platform.ready().then(() => {
            StatusBar.styleDefault();
        });
    }

    ngAfterViewInit() {
        if (this.auth.authenticated()) {
            this.rootPage = HomePage;
        }
    }
}

This works brilliantly, when I load my app it launches on the login page. Logging in with auht0 works fine, and in my auth service I’ve built a promise around the success callback. When the login service returns this promise to my login page, my redirect is triggered:

login.ts:

@Page({
templateUrl: ‘build/pages/login/login.html’
})
export class LoginPage {

constructor(private auth: AuthService, private nav: NavController, private app:IonicApp) {
}

doLogin() {
    this.auth.login()
        .then((res) => {
            if (res) {
                console.log('Login success, rerouting');
                this.nav.setRoot(HomePage);
                //let nav2 = this.app.getComponent('nav');
                //nav2.setRoot(HomePage);
            }
        })
}

}

This redirect is triggered, I’ve tried both using the NavController or the getComponent approach, both with same unsuccessful result. The code is triggered because my console output is logged. But in the view, nothing happens. I’ve also set a log in my home.ts, and you can see that this log gets triggered too… So he DOES try something…

home.ts:

@Page({
    templateUrl: 'build/pages/home/home.html'
})

export class HomePage {
    tab1 = EmployeeListPage;
    tab2 = ProfilePage;
    
    constructor() {
        console.log('init home', this.tab1);
    }
}

home.html:

<ion-tabs selectedIndex="0">
  <ion-tab tabIcon="search" [root]="tab1"></ion-tab>
  <ion-tab tabIcon="contact" [root]="tab2"></ion-tab>
</ion-tabs>

If I refresh I get my homepage displaying correctly, because the code inside ngAfterViewInit() does its work, with both tabs working fine. However… logging out on my profile tab, I would like to go back to the login page, but this doesn’t work either.

profile.ts:

@Page({
templateUrl: ‘/build/pages/profile/profile.html’
})

export class ProfilePage {
constructor(private auth:AuthService, private nav:NavController, private app:IonicApp) {

}

doLogout() {
    this.auth.logout()
       .then((res) => {
           if (res) {
               console.log('logged out, rerouting');
               //this.nav.setRoot(LoginPage);
                let nav2 = this.app.getComponent('nav');
                nav2.setRoot('HomePage');
           }
       });
}

}

Also tried both getting the nav component, or using the default NavController. That the NavController won’t work might be expected behaviour, since each tab has it’s own NavController and history? Instead of loading in the login page, the logout will just show a black screen inside tab 2.

So in short: Navigating to and from a single page layout to a tabbed layout seems to fail in both directions? Anyone who can spot if I’m doing something wrong?

All help will be greatly appreciated! Thanks :slight_smile: