Ionic Modal popup

Ionic Framework ionic-v3
1

I am trying to create Modal popup with ionic 3. there i have 2 pages page1 and page2. i want to show page2 in page1 as Modal popup.

all setup i did but getting issue : ERROR Error: Uncaught (in promise): Error: No component factory found for page2Page. Did you add it to @NgModule.entryComponents?

i am using ref https://ionicframework.com/docs/api/components/modal/ModalController/ but it seems they are using multiple component at same page while i am having different page.

is this best way to have 2 different page ? any solution for above issue?

2

The error indicates that you forgot to add Page2 to your app.module.ts. So that hasn’t really got anything to do with using multiple components and different pages. If you import page2 at the right place it should be solved.

3

with ionic 3 pages do not need to add in app.module.ts they have their own module.ts hence as per structure i did add page 2 in page1 component.

4

You need the module.ts file for that page in your app.module.ts. So yes you don’t need to add the page to your imports, you do need to add the module of that page to your app.module.ts.

And off course you still have to import page2 into page1 if you’re trying to access it through page1.

But again, it seems to me you forgot to add your page2.module file to your app.modules.

BTW you should show some code if you think there’s something else happening in your app. Please include page1.ts, page2.ts and your app.module.ts if you want some further investigation into the issue (if it isn’t due to a missing import)

5
  • What is the exact line you are using to create the modal?
  • Is Page2 declared as an entryComponent in its module?
6

app.module.ts

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

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { MyApp } from './app.component';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { RestApiProvider } from '../providers/rest-api/rest-api';
import { Device } from '@ionic-native/device';
import { GlobalsProvider } from '../providers/globals/globals';
import { InAppBrowser } from '@ionic-native/in-app-browser';
import { OneSignal } from '@ionic-native/onesignal';


export function createTranslateLoader(http: Http) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicStorageModule.forRoot(),
    TranslateModule.forRoot({
                    loader: {
                      provide: TranslateLoader,
                      useFactory: (createTranslateLoader),
                      deps: [Http]
                    }
                  }),
    IonicModule.forRoot(Bharatgas),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Device,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    RestApiProvider,
    GlobalsProvider,
    InAppBrowser,
    OneSignal
  ]
})
export class AppModule {}

(Page1) locate-distributor.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,ModalController } from 'ionic-angular';
import { NgForm,FormBuilder, FormGroup, Validators  } from '@angular/forms';
import { ModalLocatdistbPage } from '../modal-locatdistb/modal-locatdistb';

@IonicPage()
@Component({
  selector: 'page-locate-distributor',
  templateUrl: 'locate-distributor.html',
})
export class LocateDistributorPage {

  constructor(public navCtrl: NavController, 
  	public navParams: NavParams,
  	public formBuilder: FormBuilder,
    public modalCtrl: ModalController) {
  }

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

  locateDistb(form: NgForm){

    let profileModal = this.modalCtrl.create(ModalLocatdistbPage);
    profileModal.present();
  }

}

locate-distributor.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LocateDistributorPage } from './locate-distributor';

@NgModule({
  declarations: [
    LocateDistributorPage,
  ],
  imports: [
    IonicPageModule.forChild(LocateDistributorPage),
  ],
  exports: [
    LocateDistributorPage
  ]
})
export class LocateDistributorPageModule {}

Page 2 modal-locatdistb.tss)

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-modal-locatdistb',
  templateUrl: 'modal-locatdistb.html',
})
export class ModalLocatdistbPage {

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

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

}

modal-locatdistb.module.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-modal-locatdistb',
  templateUrl: 'modal-locatdistb.html',
})
export class ModalLocatdistbPage {

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

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

}

Above code i am using, What i am missing in it ?

7

opps got the mistake

let profileModal = this.modalCtrl.create('ModalLocatdistbPage'); fixed issue for me. forgot to use quotation on ModalLocatdistbPage