Ionic Back Button Not Working After Adding a Menu

Ionic Framework ionic-v3
1

So, I have a login page that is my root component. Upon successful login, I use setRoot() on the NavController to bring up the Home Page. From there, users can go a variety of ways. The back button had been working fine until I tried to add a simple menu to application. The menu is really only there as part of the home screen, to allow users to access two general settings pages and logout. There is no need to access the menu from anywhere else, because once the user leaves the Home Screen (besides the two settings pages), they are off on a workflow that should only allow them to go forward or backward in the workflow. The problem is, once I added the menu, all my back buttons stopped working. They show up on all the deeper pages, but nothing happens when they are tapped, and no information comes up in chrome while debugging.

Here is my system info:

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.0.1

local packages:

    @ionic/app-scripts : 2.1.3
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.6.0

System:

    Android SDK Tools : 25.2.5
    Node              : v6.11.2
    npm               : 3.10.10
    OS                : Windows 10

Here is my app.component.ts

import { Component } from '@angular/core';
import { Platform, Events } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = 'LoginPage';
  public user : any = {};
  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, events: Events) {
    events.subscribe('user:login', (userInfo) => {
      console.log('Subscription recieved!');
      console.log(userInfo);
      this.user = {
        'firstName' : userInfo.firstname,
        'lastName' : userInfo.lastname,
        'email' : userInfo.userID
      }
    });
    platform.ready().then(() => {
      // 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();
      splashScreen.hide();
    });
  }
}

Here is the app.html

<ion-menu id="mainMenu" [content]="appContent">
  <ion-content>
    <div class="menuInfo">
      <p>Welcome back, {{user.firstName}} {{user.lastName}}!
    </div>
    <ion-list>
      <ion-item menuClose detail-none>Close Menu</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>
<ion-nav #appContent [root]="rootPage"></ion-nav>

On successful login, LoginPage does this:

this.events.publish('user:login', this.user.getCurrentUser());
        this.navCtrl.setRoot('HomePage', { 'availableClinics' : this.user.getCurrentUser().clinics } );

Then the header for home.html looks like this:

<ion-header>
  <ion-navbar>
        <button ion-button icon-only left menuToggle>
          <ion-icon name="menu"></ion-icon>
        </button>
    <ion-title>    
      <img src="assets/images/advancedtissueSmartRxSmallWide.png" />
    </ion-title>
  </ion-navbar>
</ion-header>

That works fine, with the menuToggle button bringing up the menu fine. I have several buttons on the homepage, one of which does the following:

  openTestPage() {
    this.menuCtrl.enable(false, 'mainMenu');
    this.navCtrl.push('TestPage');
  }

The header in test.html looks like this:

  <ion-navbar>
    <ion-title>Test</ion-title>
  </ion-navbar>

I see a back button on the test page, but nothing at all happens when the button is tapped. Any thoughts on how I might recover the back button functionality?

I am testing entirely on Android at the moment, just so you know.

Thanks!

Philip

2

I was able to make this work by modifying my navbar elements in the template files of all pages beyond the home page in the following way:

<ion-navbar hideBackButton="true">
    <ion-buttons left>
      <button ion-button icon-only (click)="goBack()">
        <ion-icon name="arrow-back"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>Some Title</ion-title>
  </ion-navbar>

Then in the .ts files I added the following method:

goBack() {
  this.navCtrl.pop();
}

This accomplishes my goal, but it seems like a total hack/workaround, and I feel like I’m missing the bigger picture of why the default back button on the ion-navbar isn’t working in this case. So even though the problem is solved, if anyone could drop some wisdom as to why this was a problem in the first place, I would greatly appreciate it!

Philip