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


#1

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

Typescript Error
Cannot find name ‘MoreinfoPage’.

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

home.ts

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

@Component({
  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?


#2

Have you decalred it in the app.module.ts

declarations: [
    MyApp,
    HomePage,
    MoreinfoPage
  ],
  imports: [
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    MoreinfoPage
  ]

#3

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.


#4

this.navCtrl.push(MoreinfoPage );

in ts


#5

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?


#6

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.