Unable to open modal from custom component method

Ionic Framework ionic-v3
1

Current behavior:
I’ve followed the proper documentation regarding opening a modal on another page, but I’m still getting an error:
Uncaught (in promise): Error: No component factory found for [object Object[. Did you add it to @NgModule.entryComponents … etc etc

Expected behavior:
For me to open the modal without the error.

AppModule

import {BrowserModule} from '@angular/platform-browser';
import {ErrorHandler, NgModule} from '@angular/core';
import {IonicApp, IonicErrorHandler, IonicModule} from 'ionic-angular';
import {SplashScreen} from '@ionic-native/splash-screen';
import {StatusBar} from '@ionic-native/status-bar';
import {MyApp} from './app.component';
import {HomePage} from '../pages/home/home';
import {DataProvider} from '../providers/data-provider';
import {HttpClientModule} from "@angular/common/http";
import {EventCardComponent} from "../components/event-card/event-card";
import {TabsPage} from "../pages/tabs/tabs";
import {MapPage} from "../pages/map/map";
import {SettingsPage} from "../pages/settings/settings";
import {EventModalPage} from "../pages/event-modal/event-modal";

@NgModule({
  declarations: [
    MyApp,
    TabsPage,
    HomePage,
    MapPage,
    SettingsPage,
    EventCardComponent,
    EventModalPage
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    TabsPage,
    HomePage,
    MapPage,
    SettingsPage,
    EventModalPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    DataProvider
  ]
})
export class AppModule
{
}

HomePageModule

import { NgModule } from '@angular/core'; 
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home'; 
import {ComponentsModule} from "../../components/components.module"; 
import {EventModalPage} from "../event-modal/event-modal"; 

@NgModule({ 
declarations: [ HomePage, EventModalPage ], 
imports: [ IonicPageModule.forChild(HomePage), ComponentsModule ], 
entryComponents: [ EventModalPage ] }) 
export class HomePageModule {}

EventCard.ts (custom component that is on the home page)

  openModal(event)
  {
    let modal = this.modalController.create({EventModalPage}, {'event': event});
    modal.present();
  }

(Let me know if I need to include any other information here that would be helpful)

2

You’re passing the modal incorrectly. It should be:

this.modalController.create(EventModalPage, ...
3 Likes
3

Jesus Christ.
Thank you so much.