title: ionic 4 using modals via the modalcontroller
body: <p>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: </p>
  
  <p>The page in which I'm trying to launch the Modal : </p>
  
  <pre><code>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();
    }
  
  }
  </code></pre>
  
  <p>My Modal Page :</p>
  
  <pre><code>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
  </code></pre>
  
  <p>I'm getting an error to state that it may not be included in the entry components : </p>
  
  <blockquote>
    <p>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?</p>
  </blockquote>
  
  <p>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: </p>
  
  <blockquote>
    <p>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.</p>
  </blockquote>
  
  <p>How would I use the modal controller to present a modal within Ionic 4 / Angular 6 ? </p>
  
  <p>Thanks</p>