Error : No Component Factory Found. Did you add it to @NgModule.entryComponents?

Question

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?

Faludi

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 angular.io/guide/ngmodule-faq#q-entry-component-defined – Joanjoana

@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 – Faludi

Then add both entryComponent and declaration in your TestModule. Remove entryComponent from homepage.module.ts – Joanjoana

Answer 1

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)

Nodical

I ran the code snippet. I get "Uncaught SyntaxError: Invalid or unexpected token" – Lindell

this worked for me, however I only had the problem in production environment. Everything worked just fine on my computer. I don't know why! – Aultman