Navigation doesn't work after updating to 3.5.0

Ionic Framework ionic-v3
1

Another update - confirmed this is an issue with 3.5.0. I re-installed ionic-angular@3.4.2 and the back button works again. I noticed in the new release documentation that some changes were made to the navigation system - is there something that I should change in my code regarding the back button / setRoot or should I stay on 3.4.2 for now?

Hey all,

I built an Ionic project about a month ago with three levels of navigation - that is, from the home screen, a link brings you to a second page with a link that brings you to a third. Everything worked a month ago. However, when I came back to it today (I updated to the latest version of ionic), I found that the navigation no longer functioned on the third page.

Basically, from the home page, I click a link that takes me to page 2. Page 2 has an auto-generated back button that brings me back to the start. However, if I click on a link to take me to page 3, navigation no longer functions on that page. The auto-generated back button won’t bring me back to page 2, and a function I built using the setRoot command that functioned a month ago no longer works either:

this.nav.setRoot(
	HomePage
);

I’m wondering if there’s any way I can try to debug what’s happening - I’ve been using console.log to log the NavController after running this command, and it doesn’t appear that the NavController’s root is modified at all.

Edit: Did some more testing - added the following code:

console.log(this.nav.getViews());
this.nav.setRoot(
	ProblemSettings	
);
console.log(this.nav.getViews());

However, the console shows no change in the view stack.
image

2

I wouldn’t do anything weird with the nav stack until maybe version 4. How about just doing this.navCtrl.push('NameOfPage'); and this.navCtrl.pop() ? Works for me.

3

Maybe, but I didn’t write any code for the auto-generated back button - that should still work!

4

Not if you’re setting the root in weird ways.

5

I’ve removed that function and the generated back button still doesn’t work - I don’t think it’s related to the root.

6

If it was a general problem we would probably hear about this more often. I would suggest you create a new blank project (ionic start blank blank) and implement your navigation in there to see if it works as expected. If it does, something in your app is messing with something.

7

After upgrading to 3.5.0 from 3.3.0 (via 3.4.1) I have the problem that nav.push(“MyPage”); doesn’t do anything. It may be that I do “weird” things as I do nav.remove() to keep the stack size from growing large. It is a video quiz app where “back” is an abort button that takes you back to the start page so all passed questions may be removed when they have navigated out to free up that memory. Without video unloading my app cannot show more videos on my iPhone after about 10 questions, so it is a real issue and not just imaginary. But of course I could try to just unload the video and leave the rest of the page in memory and hope it won’t bite me.

The app is a game with a linear flow so there is no point really to keep pages that you have been at already except for the start/root page that you will return to when you’ve completed all quiz questions.

Edit: As opposed to OP I use lazy loading in my app.

Edit 2: This is the code that changes page. Removing navCtrl.remove(...) will cause navigation to work for me. But will then not unload past pages during the quiz. navCtrl here is passed from the Page component as this method is in a utility class which I implemented as a provider (if nav utilities should not be providers please correct me).

  private static navToQuestionPage(questionType : QuestionType, navCtrl : NavController) {
    // Don't keep all question pages as that will use up all resources on mobile
    if (navCtrl.length() > 2) {
      navCtrl.remove(1, 1, {animate: false}); // <--- Removing this line solves the error that navigation in 3.5 doesn't work for me.
    }

    // Get reference to next page
    let page = null;
    switch (questionType) {
      case QuestionType.GuessFromVideo:
        page = 'GuessFromVideoPage';
        break;
      case QuestionType.GuessVideoFromWord:
        page = 'GuessVideoFromWordPage';
        break;
      case QuestionType.TypeFromVideo:
        page = 'TypeFromVideoPage';
        break;
    }
    navCtrl.push(page);
  }