Error: Cannot find name 'MoreInfo' while trying to push to MoreinfoPage from HomePage


I’m trying to load MoreinfoPage from HomePage upon button click, I get the following error:

Typescript Error
Cannot find name ‘MoreinfoPage’.

<button [navPush]="moreinfoPage">More Info</button>


import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { MoreinfoPage } from 'pages/moreinfo/moreinfo'

  selector: 'page-home',
  templateUrl: 'home.html'
export class HomePage {
  moreinfoPage: MoreinfoPage;
  constructor(public navCtrl: NavController){}

I haven’t made any changes to the default folder structure. Why can’t it find the MoreinfoPage?


Have you decalred it in the app.module.ts

declarations: [
  imports: [
  bootstrap: [IonicApp],
  entryComponents: [


Yes, I did. Despite the declaration in the app module, I’m getting the error. What’s the correct approach for this? Thanks for the reply.


this.navCtrl.push(MoreinfoPage );

in ts


I solved the problem as follows:

export class HomePage {

  moreinfoPage: any;

  constructor(public navCtrl: NavController) {
    this.moreinfoPage = MoreinfoPage;

If I assign the imported class MoreinfoPage as the datatype for var moreinfoPage, the error persists. Is there a better way to resolve this? Anybody?


Probably not at the moment. You could try using a generic, and it may work, especially given Ionic’s arguably-sketchy pretranspiling-before-AoT, but I wouldn’t rely on it. Some more info here.