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

Ionic Framework ionic-v3
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.