'Cannot find name XxxPage' Problem


#1

Dear Friends,
I am a newbie in ionic framwork. I try to add a page to existing ‘DreamHome’ sample code with name ‘Payment’. I generate new page through command. I got the error

my file content below: /app/app.component.ts

this.appMenuItems = [
            {title: 'Properties', component: PropertyListPage, icon: 'home'},
            {title: 'Brokers', component: BrokerListPage, icon: 'people'},
            {title: 'Favorites', component: FavoriteListPage, icon: 'star'},
            {title: 'Get Preapproved', component: WelcomePage, icon: 'checkmark-circle'},
            //{title: 'Birth Certificate', component: BirthCertificatePage, icon: 'people'},
            {title: 'Payment', component: PaymentPage, icon: 'people'},
        ];
  1. payment.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

/**
 * Generated class for the PaymentPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-payment',
  templateUrl: 'payment.html',
})
export class PaymentPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad PaymentPage');
  }

}

  1. payment.scss
page-payment {

}

  1. payment.html
<!--
  Generated template for the PaymentPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>Payment</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

</ion-content>

Please advise

Thanks

Anes


#2

Hello,

maybe your command had generated a lazy loaded page.

Has the folder of your paymentpage a file like paymentpage.module.ts?

If so, backup it on a other place, then delete this file in your folder. Import in app.module.ts your page and add it to declarations and entrycomponents.

See, how other pages in app.module.ts are imported etc…

If this not helps, copy backup back and maybe other person has better idea.

Best regards, anna-liebt


#3

Hi Anna,
I do as you suggest . But unfortunately now I could not see any error, but a white blank page.

My app.module.ts file is

import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';
import {WelcomePage} from '../pages/welcome/welcome';
import {PropertyListPage} from '../pages/property-list/property-list';
//import {BirthCertificatePage} from '../pages/birth-certificate/birth-certificate';
import {PaymentPage} from '../pages/payment/payment';
import {PropertyDetailPage} from '../pages/property-detail/property-detail';
import {BrokerListPage} from '../pages/broker-list/broker-list';
import {BrokerDetailPage} from '../pages/broker-detail/broker-detail';
import {FavoriteListPage} from '../pages/favorite-list/favorite-list';
import {AboutPage} from '../pages/about/about';

import {PropertyService} from "../providers/property-service-mock";
import {BrokerService} from "../providers/broker-service-mock";

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    WelcomePage,
    AboutPage,
    PropertyListPage,
    PaymentPage,
    PropertyDetailPage,
    FavoriteListPage,
    BrokerListPage,
    BrokerDetailPage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    WelcomePage,
    AboutPage,
    PropertyListPage,
    PaymentPage,
    PropertyDetailPage,
    FavoriteListPage,
    BrokerListPage,
    BrokerDetailPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    PropertyService,
    BrokerService,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

You can see my page in that as ‘PaymentPage’ entry.

Please advise

Thanks

Anes


#4

Hi Anna ,

Thanks for your support . My problem solved. I return back my ‘Payment.module.ts’ file and
comment one line in that as below:

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { PaymentPage } from './payment';

@NgModule({
  declarations: [
    PaymentPage,
  ],
  /*imports: [
    IonicModule.forChild(PaymentPage),
  ],*/
  exports: [
    PaymentPage
  ]
})
export class PaymentPageModule {}

Now show my Test page without any problem…

Thanks alot for your valuable support

Anes