Ionic Framework - 'nav' undefined when trying to push pages

I am trying to make an Android app using Ionic framework. I implemented a side menu and when I try to push pages from the side menu, I get an error in the console saying:

Cannot read property ‘push’ of undefined

app.ts

import { Component, ViewChild } from '@angular/core';
import { ModalController, ionicBootstrap, Platform, MenuController, NavController } from 'ionic-angular';
import { StatusBar } from 'ionic-native';

import { HomePage } from './pages/home/home';
import {AppSettingsPage} from "./pages/app-settings/app-settings";
import {TabsPage} from "./pages/tabs/tabs";
import {ReserveRoomPage} from "./pages/reserve-room/reserve-room";
import {ConfirmedReservationsPage} from "./pages/confirmed-reservations/confirmed-reservations";


@Component({
  templateUrl: 'build/app.html',
  providers: [NavController]
})
export class MyApp {
  @ViewChild('nav') nav: NavController;
  private rootPage: any;
  private pages: any[];
  private icon = 'cog';

  constructor(private platform: Platform, private menu: MenuController,
  private modalCtrl: ModalController) {
  this.menu = menu;
    this.pages = [
      {title: 'Home', component: HomePage, icon: 'home'},
      {title: 'Settings', component: AppSettingsPage, icon: 'settings'},
      {title: 'Reserve Room', component: ReserveRoomPage, icon: 'add'},
      {title: 'My Reservations', component: ConfirmedReservationsPage, icon: 'book'},
    ];
    this.rootPage = TabsPage;

    platform.ready().then(() => {
      StatusBar.styleDefault();
    });
  }

  openPage(page){
    this.menu.close();
    this.nav.push(page.component);
  }

}

ionicBootstrap(MyApp);

app.html

<ion-menu [content] = "content">
  <ion-toolbar>
    <ion-title><strong>Giman</strong>.lk</ion-title>
  </ion-toolbar>
  <ion-content>
    <ion-list>
      <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
        <ion-icon name="{{ p.icon }}"></ion-icon> {{ p.title }}
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>

app-settings.ts (Example of a page I want to push)

import { Component } from '@angular/core';
import { ViewController, NavController } from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/app-settings/app-settings.html',
})
export class AppSettingsPage {

  constructor(private navCtrl: NavController, private view: ViewController) {

  }
  goBack(){
    this.view.dismiss();
  }

}

(I imported ModalController because I wanted to preview my App UI flow and because push didn’t work, I used each page as a modal just for preview purposes. For the final app, I need push and pop)

Did you manage to solve this problem? I’m dealing with the same error in my app and I’m not doing anything different than you.

Nevermind, found the answer on your post on stackoverflow (http://stackoverflow.com/a/39698969).

:grin::grin::grin::grin: glad to hear, bro. Btw, that post is mine as well. I got an answer on stackoverflow because no one replied to this. But I’m really glad it helped you. Happy New Year!!