12

I am trying to create a popover on my Home Page.So I have created following function..

public presentPopover(myEvent) {
    let popover = this.popoverCtrl.create(TestComponent);
    popover.present({
      ev: myEvent
    });
  }

in my homepage.module.ts i have added testComponent as entry component.

import { TestModule } from './../../components/test/test.module';
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { TestComponent } from './../../components/test/test';

@NgModule({
  declarations: [
    HomePage,
  ],
  imports: [
    TestModule,
    IonicPageModule.forChild(HomePage),
  ],
  entryComponents: [
    TestComponent,
  ]
})

But i am still getting this error wheni click that popover button.

ERROR Error: Uncaught (in promise): Error: No component factory found for TestComponent. Did you add it to @NgModule.entryComponents?
Error: No component factory found for TestComponent. Did you add it to @NgModule.entryComponents?
    at noComponentFactoryError (core.js:3786)
    at CodegenComponentFactoryResolver.resolveComponentFactory (core.js:3850)
    at PopoverCmp._load (popover-component.js:41)
    at PopoverCmp.ionViewPreLoad (popover-component.js:33)

And I am confused why should I add this to entry Components?

CuriousAboutThings
  • 454
  • 2
  • 5
  • 13
  • 1
    To solve your problem you need to add the TestComponent to declarations as well. Regarding to why to add to entryComponent, go through this url https://angular.io/guide/ngmodule-faq#q-entry-component-defined – Srinivas Valekar Nov 22 '17 at 19:18
  • 1
    @SrinivasValekar if I am adding this to declaration, i am getting an error which says you have defined test component in two places, in your test module, and in your home module – CuriousAboutThings Nov 22 '17 at 19:33
  • 1
    Then add both **entryComponent** and **declaration** in your TestModule. Remove entryComponent from **homepage.module.ts** – Srinivas Valekar Nov 22 '17 at 19:40

1 Answers1

15

You need to add dynamically created components to entry components inside your @NgModule

@NgModule({
  ...
  declarations: [
    ...
    Name of your component,
  ],
  entryComponents: [
    ...
    Name of your component,    
  ]
})

Note: In some cases entry components under lazily loaded modules will not work, as a workaround put them in your app.module (root)

Seyed Hussein Mirzaki
  • 321
  • 3
  • 7
arun kumar
  • 1,151
  • 1
  • 11
  • 25