Side menu not loading pages

Question

I have an Ionic2 app that has a basic side menu layout with a few pages that need loading in to view.

My app.html looks like this

<ion-menu [content]="content" persistent="true">

    <ion-content>
        <ion-list>
            <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p.component)">
                {{ p.title }}
            </button>
        </ion-list>
    </ion-content>

</ion-menu>


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

and my app.component.ts looks like this.

import { Component } from '@angular/core';

import {IonicApp, Platform, NavController} from 'ionic-angular';
import {LoginPage} from '../pages/login/login';

import {MessagesPage} from '../pages/messages/messages';
import {ProfilePage} from '../pages/profile/profile';
import {TripsPage} from '../pages/trips/trips';


@Component({
    templateUrl: 'app.html'
})

export class PitchHikeApp {

    rootPage = LoginPage;

    static get parameters() {
        return [[IonicApp], [Platform]];
    }

    constructor(public navCtrl: NavController) {}

    pages = [
        {title: 'My Trips', component: 'TripsPage'},
        {title: 'Messages', component: 'MessagesPage'},
        {title: 'Profile', component: 'ProfilePage'}
    ]

    openPage(page) {
        console.log(page);
        this.navCtrl.push(page);
    }

}

The issue for me now is that everything works fine. The page loads, the menu populates with my pages from my pages array.

I've pretty much followed the code from the Ionic2 site but when I click the menu items it fires off a load of console errors. The main error is "Cannot read property 'push' of undefined"

The page parameter is outputting the component for which page we're looking to fire so i'm not too sure why this is coming back as undefined.

Answer 1

Check the NavController API documentation you need to define @ViewChild and pages array need to be defines as below :

pages = [
    {title: 'My Trips', component: TripsPage},
    {title: 'Messages', component: MessagesPage},
    {title: 'Profile', component: ProfilePage}
];