Navigation problem using setRoot

Ionic Framework ionic-v3
1

Hi guys,

This is what I have:
I have a very simple app with 3 pages:

  1. LoginPage
  2. HomePage
  3. HomeDetailPage ( I call it from HomePage with navController.push(HomeDetailPage) )

And this is what I want:
I want that when the user do login, the app should redirect He to the HomePage.
If the user is in the HomePage or in HomeDetailPage and launch logout function, the app should redirect he to the LoginPage and if He’ll make login again, The app will go in the HomePage.

But this is my trouble:
If I call logout function from the HomePage all is well.
But If I call the logout function from the HomeDetailPage, the App come back to LoginPage correctly but if i try to call login again, I recive an error:

ERROR TypeError: Cannot read property 'push' of null
    at Tab.NavControllerBase._queueTrns (vendor.js:51240)
    at Tab.NavControllerBase.push (vendor.js:51128)
    at SafeSubscriber._next (main.js:259)
    at SafeSubscriber.__tryOrUnsub (vendor.js:22842)
    at SafeSubscriber.next (vendor.js:22789)
    at Subscriber._next (vendor.js:22729)
    at Subscriber.next (vendor.js:22693)
    at MapSubscriber._next (vendor.js:124303)
    at MapSubscriber.Subscriber.next (vendor.js:22693)
    at SwitchMapSubscriber.notifyNext (vendor.js:129085)

app.component.ts
I’ve used AngularFireAuth for make login and logoud and check the authentication

import { Component, ViewChild } from '@angular/core';
import { Platform, NavController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { TabsPage } from '../pages/tabs/tabs';
import { LoginPage } from '../pages/login/login';
import { AngularFireAuth } from 'angularfire2/auth';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage: any = LoginPage;
  @ViewChild('rootNav') nav: NavController;

  constructor(platform: Platform,
    statusBar: StatusBar,
    splashScreen: SplashScreen,
    private afAuth: AngularFireAuth) {

    platform.ready().then(() => {
      //I've tried to move here the block of code in the ngOnInit but the behavieour is the same

      statusBar.styleDefault();
      splashScreen.hide();
    });
  }

  ngOnInit() {
    this.afAuth.auth.onAuthStateChanged(user => {
      if (user) {
        this.nav.setRoot(HomePage); //I've tried also with this.rootPage = HomePage and the behavieur is the same
      } else {
        this.nav.setRoot(LoginPage);  //I've tried also with this.rootPage = LoginPage and the behavieur is the same
      }
    });
  }
}

The Login function in login.ts page is:

  login(email: string, password: string) {
    this.afAuth
      .auth
      .signInWithEmailAndPassword(email, password)
      .then(value => { })
      .catch(err => {
        console.log('Something went wrong:', err.message);
      });
  }

And the logout function iinside the HomePage.ts and DetailHomePage is:

  logout() {
    if (this.navCtrl.last().index > 0) {
      this.navCtrl.remove(this.navCtrl.last().index)
        .then( () => {
          this.afAuth.auth.signOut();
        },
        error => {console.error(error); }
        );
    }
    else {
      this.authService.logout();
    }

I’ve tried with a simple logout version like this below also, but the error that I have had is the same.

logout() {
          this.afAuth.auth.signOut();
    }

Thank you :slight_smile:

2

What’s the html of your ion-nav?

3

This is the HTML of my app.html

<ion-nav #rootNav [root]="rootPage"></ion-nav>
4

Some code you haven’t posted is doing something. Do you inject NavController anywhere? Eg, this.navCtrl.push.

5

No, the pages is empty.
I have inject NavController in LoginPage, HomePage and DetailHomePage.
I’ve just tried to remove navController from the DetailHomePage but the error is the same.

6

And you stopping ionic serve, closed your browser, and tried again, so there were no cache issues?

7

Yes, I did.
I’ve cleared Chrome cache and I’ve reboot ionic server.
I’ve tried also to deploy app on my real device (android) and the error is the same yet.

The problem seems like to relate to the navigation stack but I don’t understand why and what happen.

8

The error almost certainly lies in something you haven’t shared yet.

2 Likes
9

You’re right. I’ve forget this pice of code with Observable and Subscription. It tried to load the HomeDetailPage.
I’ve just changed it and now it work very well.
Thank you. :slight_smile:

gotoDetailPage()
{
    this.authService.getUid().subscribe(val => {
      if (val)
        this.navCtrl.push(HomeDetailPage, { uid: val });
    });    
}