Philip7899 Philip7899 - 1 month ago 100
TypeScript Question

navpush not working in ionic 2

I am trying to do some basic routing in Ionic 2. Here is my code:

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

import { NavController } from 'ionic-angular';

import {FishPage} from '../fish';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

goFish: FishPage;
constructor(public navCtrl: NavController) {
this.goFish = FishPage;
}

}


and here is FishPage:

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

@Component({
templateUrl: 'fish.html'
})
export class FishPage {

constructor() {

}
}


and here is the html:

<ion-content>
<button ion-button full [navPush]="goFish" >Go Fish</button>
</ion-content>


However, when i click on the button I get the following error:


EXCEPTION: Error in ./HomePage class HomePage - inline template:16:2
caused by: No component factory found for FishPage

Answer

You want to make sure that your FishPage and all others are included in declarations and entryComponents in app.module file. The purpose of this file is just to declare/represent before hand all the components, providers, directives or pipes that the application uses. Afterwards the module is then loaded into app/main.dev.ts or app/main.prod.ts.

Since Ionic 2 leverages Angular 2, take a look at Angular 2's documentation instead.

These guides go into detail of the changes in the building blocks for angular apps.

Hope this helps!

Comments