user9492428 user9492428 - 1 year ago 139
Android Question

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


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";

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) { = 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(() => {





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

<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';

templateUrl: 'build/pages/app-settings/app-settings.html',
export class AppSettingsPage {

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



(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)

Answer Source

Set the @ViewChild to NavController but to Nav.

import { Nav } from 'ionic-angular';


  templateUrl: "build/app.html" //no need for the provider

class MyApp{
  @ViewChild(Nav) nav:Nav; //remove the 'id' from the HTML, it will find the ion-nav tag
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download