ionic 4 using modals via the modalcontroller

Question

I'm using Ionic 4 and looking to use modals using the ModalController. In Ionic 3.x it was fairly straightforward, but I'm getting a number of errors in Ionic 4:

The page in which I'm trying to launch the Modal :

import { Component, OnInit } from '@angular/core';
import { NavController, NavParams, ModalController } from '@ionic/angular';
import { MyModalPage } from '../MyModalPage/MyModalPage.page';

@Component({
  selector: 'app-product-display',
  templateUrl: './product-display.page.html',
  styleUrls: ['./product-display.page.scss'],
})
export class ProductDisplayPage implements OnInit {

  private params:any = {};
  public product:product = {};

  constructor(

    public modalCtrl : ModalController
  ) { 

  }//End of Constructor

  ngOnInit() {
  }

  async openModal()
  {

    var data = { message : 'hello world' };

    const modalPage = await this.modalCtrl.create({
      component: MyModalPage, 
      componentProps:{values: data}
    });

    return await modalPage.present();
  }

}

My Modal Page :

import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-my-modal',
  templateUrl: './my-modal.html',
  styleUrls: ['./my-modal.page.scss'],
})
export class MyModalPage implements OnInit {

  constructor(

  ) { }//End of Constructor

  ngOnInit() {
  }//End of ngOnInit

  closeModal()
  {


    //TODO: Implement Close Modal this.viewCtrl.dismiss();
  }

}//End of Class

I'm getting an error to state that it may not be included in the entry components :

ERROR Error: Uncaught (in promise): Error: No component factory found for MyModalPage. Did you add it to @NgModule.entryComponents? Error: No component factory found for MyModalPage. Did you add it to @NgModule.entryComponents?

When I add it to the entry components of the Product Display module, I then get another error stating it hasn't been imported. When I add it to the imports of Product Display Module I get the following:

core.js:1671 ERROR Error: Uncaught (in promise): Error: Unexpected directive 'MyModalPage' imported by the module 'ProductDisplayPageModule'. Please add a @NgModule annotation. Error: Unexpected directive 'MyModalPage' imported by the module 'ProductDisplayPageModule'. Please add a @NgModule annotation.

How would I use the modal controller to present a modal within Ionic 4 / Angular 6 ?

Thanks

Answer 1

Unfortunately the Ionic v4 Modals can not lazy load a page (yet, I expect this to be able later on). So you have to import the component as you did, however, you also need to add it to the declarations in the app module. Like this:

@NgModule({
    declarations: [
        AppComponent,
        MyModalPage
    ],
    entryComponents: [
        MyModalPage
],
...

Hope this helps! I am sure the documentation will improve on this point, because I also ran into this issue.