Angular 4 no component factory found did you add it to NgModule entryComponents

Question

I m using Angular 4 template with webpack and I have this error when I try to use a component  ConfirmComponent       No component factory found for ConfirmComponent   Did you add it to    NgModule entryComponents    The component is declared in app module server ts   NgModule     bootstrap    AppComponent      imports                      entryComponents        ConfirmComponent          export class AppModule       I have also  app module browser ts and app module shared ts  How can I fix that

User · Answer

In my case i solved this issue by  1  placing NgxMaterialTimepickerModule in app module imports     2  placing NgxMaterialTimepickerModule in testmodule ts imports     3  placing testcomponent in declartions     and entryComponents         I m using angular 8  version

User · Answer

You should import the NgbModule in the module like this    x000D   x000D   NgModule   x000D    declarations    x000D      AboutModalComponent x000D       x000D    imports    x000D      CommonModule  x000D      SharedModule  x000D      RouterModule  x000D      FormsModule  x000D      ReactiveFormsModule  x000D      NgxLoadingModule  x000D      NgbDatepickerModule  x000D      NgbModule x000D       x000D    entryComponents   AboutModalComponent  x000D     x000D   export class HomeModule    x000D   x000D   x000D

User · Answer

i import the material design dialog module   so i created aboutcomponent for dialog the call this component from openDialog method then i got this error   i just put this declarations        AppComponent      ExampleDialogComponent         entryComponents        ExampleDialogComponent

User · Answer

This error occur when you try to load a component dynamically and    The component you want to load is not routing module The component is no in module entryComponents    in routingModule  const routes  Routes      path   confirm-component   component  ConfirmComponent data         or in module  entryComponents    ConfirmComponent      To fix this error you can add a router to the component or add it to entryComponents of module    Add a router to component drawback of this approach is your component will be accessible with that url  Add it to entryComponents  in this case your component will not have any url attached to and it will not be accessible with url

User · Answer

Place components which are created dynamically to entryComponents  under  NgModuledecorator function    NgModule       imports            FormsModule          CommonModule          DashbaordRoutingModule            declarations            MainComponent          TestDialog            entryComponents            TestDialog

User · Answer

In my case  I forgot to add MatDialogModule to imports in a child module

User · Answer

In case you have still the error after providing component dialog class in entryComponents  try to restart ng serve - it worked for me

User · Answer

entryComponents is vital  Above answers on this are correct    But      If you re providing a service that opens the modal  a common pattern   and your module that defines the dialog component is not loaded in AppModule  you need to change providedIn   root  to providedIn  MyModule   As general good practice you should just use the providedIn  SomeModule for all dialog services that are in modules

User · Answer

Add that component to entryComponents in  NgModule of your app s module   entryComponents  ConfirmComponent     as well as Declarations   declarations        AppComponent      ConfirmComponent

User · Answer

if you use routing in your application     make sure Add new components into the routing path   for example         const appRoutes  Routes         path      component  LoginComponent        path   home   component  HomeComponent        path   fundList        component  FundListComponent

User · Answer

I was getting the same issue with ag-grid using dynamic components  I discovered you need to add the dynamic component to the ag-grid module  withComponents    imports        StratoMaterialModule      BrowserModule      AppRoutingModule      HttpClientModule      BrowserAnimationsModule      NgbModule forRoot        FormsModule      ReactiveFormsModule      AppRoutingModule      AgGridModule withComponents ProjectUpdateButtonComponent

User · Answer

I might be replying late on this  But removing this can be helpful for some people who are still looking for solutions to this problem and has this in their code  We had below entry since long in our tsconfig json file     quot angularCompilerOptions quot          quot enableIvy quot   false      We also face same problem  After lot of experiments  we removed this block from tsconfig json  Now our code is not complaining this problem anymore

User · Answer

If you still haven t resolved this issue - like me - here is what caused this error for me  As  jkyoutsey suggested  I was indeed trying to create a modal component  I spent considerable time following his suggestions by moving my component to a service and injecting it into the page component  Also changing providedIn   root  to MyModule  which of course had to be moved at least one level up to avoid a circular reference  I m not all together sure any of that actually was necessary  What finally solved the 8-hour long puzzle was to NOT implement ngOnInit in my component  I had blindly implemented ngOnInit even though the function was empty  I tend to do that  It s probably a bad practice  Anyway  if someone could shed light on why an empty ngOnInit would have caused this error  I d love to read the comments

User · Answer

In this section  you must enter the component that is used as a child in addition to declarations   CityModalComponent  modal components  in the following section in the app module ts file   entryComponents    CityModalComponent

User · Answer

Add  NgbModalModule  in imports and your component name in entryComponents App module ts as shown below

User · Answer

I had same issue in Angular7 when I create dynamic components  There are two components TreatListComponent  MyTreatComponent  that needs to be loaded dynamically  I just added entryComponents array in to my app module ts file        entryComponents        TreatListComponent      MyTreatComponent

User · Answer

TL DR  A service in ng6 with providedIn   root  cannot find the ComponentFactory when the Component is not added in the entryComponents of app module   This problem can also occur if you are using angular 6 in combination with dynamically creating a Component in a service   For example  creating an Overlay    Injectable     providedIn   root     export class OverlayService      constructor private  overlay  Overlay        openOverlay         const overlayRef   this  createOverlay        const portal   new ComponentPortal OverlayExampleComponent        overlayRef attach portal  instance          The Problem is the      providedIn   root    definition  which provides this service in app module   So if your service is located in  for example  the  OverlayModule   where you also declared the OverlayExampleComponent and added it to the entryComponents  the service cannot find the ComponentFactory for OverlayExampleComponent

User · Answer

I m using Angular8  and I m trying to open the component dynamically form another module   In this case  you need to import the module into the module that s trying to open the component  of course in addition to export the component and list it into the entryComponents array as the previous answers did   imports                TheModuleThatOwnTheTargetedComponent

User · Answer

See the details about entryComponent   If you are loading any component dynamically then you need to put it in both declarations and entryComponent    NgModule     imports           exports           entryComponents   ConfirmComponent        declarations   ConfirmComponent         providers

User · Answer

Add this in your module ts    declarations      AppComponent    ConfirmComponent     if ConfirmComponent is in another module  you need to export it there thus you can use it outside  add    exports    ConfirmComponent     ---Update Angular 9 or  Angular 8 with Ivy explicitly enabled---  Entry Components With Ivy are not required anymore and now are deprecated  ---for Angular 9 and 8  with Ivy disabled---  In the case of a dynamically loaded component and in order for a ComponentFactory to be generated  the component must also be added to the module   s entryComponents   declarations      AppComponent    ConfirmComponent    entryComponents   ConfirmComponent     according to the definition of entryComponents      Specifies a list of components that should be compiled when this module is defined  For each component listed here  Angular will create a ComponentFactory and store it in the ComponentFactoryResolver

User · Answer

For clarification here  In case you are not using ComponentFactoryResolver directly in component  and you want to abstract it to service  which is then injected into component you have to load it under providers for that module  since if lazy loaded it won t work

User · Answer

I had the same issue for bootstrap modal     import   NgbModal   from   ng-bootstrap ng-bootstrap     If this is your case just add the component to the module declarations and entryComponents as other responses suggest  but also add this to your module     import   NgbModule   from   ng-bootstrap ng-bootstrap     imports       NgbModule forRoot

User · Answer

I have the same problem with angular 6   that s what worked for me     NgModule       entryComponents   ConfirmComponent   providers  ConfirmService        If you have a service like ConfirmService  have to be declare in providers of current module instead of root

User · Answer

I had the same issue  In this case imports       is crucial  because it won t work if you don t import NgbModalModule   Error description says that components should be added to entryComponents array and it is obvious  but make sure you have added this one in the first place     imports                NgbModalModule

User · Answer

My error was calling NgbModal open method with incorrect parameters from  html

User · Answer

In my case I didn t need entryComponents at all - just the basic setup as described in the link below  but I needed to include the import in both the main app module and the enclosing module   imports        NgbModule forRoot                https   medium com  sunilk getting-started-angular-6-and-ng-bootstrap-4-4b314e015c1c  You only need to add it to entryComponents if a component will be included in the modal  From the docs      You can pass an existing component as content of the modal window  In   this case remember to add content component as an entryComponents   section of your NgModule

[angular] Angular 4: no component factory found,did you add it to @NgModule.entryComponents?

Examples related to angular

Examples related to angular-webpack-starter