Angular 4: factory component not found, have you added it to @ NgModule.entryComponents?

I am using an Angular 4 template with a web package and I get this error when I try to use the (ConfirmComponent) component:

No component factory was found for ConfirmComponent. Have you added it to @ NgModule.entryComponents?

Component declared in app.module.server.ts

@NgModule({
  bootstrap: [ AppComponent ],
  imports: [
    // ...
  ],
  entryComponents: [
    ConfirmComponent,
  ],
})
export class AppModule { }

I also have app.module.browser.tsandapp.module.shared.ts

How can i fix this?

+197
source share
18 answers

Add this to your module.ts,

declarations: [
  AppComponent,
  ConfirmComponent
]

if the ConfirmComponent is in another module, you need to export it there so that you can use it outside, add:

exports: [ ConfirmComponent ]

ComponentFactory entryComponents:

declarations: [
  AppComponent,
  ConfirmComponent
],
entryComponents: [ConfirmComponent],

entryComponents

, . , , Angular ComponentFactory ComponentFactoryResolver.

+261

entryComponent:

- , declarations entryComponent:

@NgModule({
  imports: [...],
  exports: [...],
  entryComponents: [ConfirmComponent,..],
  declarations: [ConfirmComponent,...],
  providers: [...]
})
+93

TL; DR: ng6 providedIn: "root" In providedIn: "root" ComponentFactory, entryComponents app.module.

, Angular 6 !

, :

@Injectable({
  providedIn: "root"
})
export class OverlayService {

  constructor(private _overlay: Overlay) {}

  openOverlay() {
    const overlayRef = this._createOverlay();
    const portal = new ComponentPortal(OverlayExampleComponent);

    overlayRef.attach(portal).instance;
  }
}

,

: ""

, app.module.

, , , "OverlayModule", OverlayExampleComponent entryComponents, ComponentFactory OverlayExampleComponent.

+40

. imports [...] , , NgbModalModule.

, entryComponents , , :

imports: [
    ...
    NgbModalModule,
    ...
  ],
+30

entryComponents @NgModule :

entryComponents:[ConfirmComponent],

:

declarations: [
    AppComponent,
    ConfirmComponent
]
+20

"NgbModalModule" entryComponents App.module.ts, enter image description here

+10

angular 6, :

@NgModule({
...
entryComponents: [ConfirmComponent],
providers:[ConfirmService]

})

, ConfirmService, root

+9

, entryComponents @NgModuledecorator.

@NgModule({
    imports: [
        FormsModule,
        CommonModule,
        DashbaordRoutingModule
    ],
    declarations: [
        MainComponent,
        TestDialog
    ],
    entryComponents: [
        TestDialog
    ]
})
+7

bootstrap modal

import {NgbModal} '@ng-bootstrap/ng-bootstrap';

, entryComponents, ,

import {NgbModule} '@ng-bootstrap/ng-bootstrap';

imports: [
   NgbModule.forRoot(),
   ...
]
+7

Angular7 . (TreatListComponent, MyTreatComponent), . entryComponents app.module.ts.

entryComponents: [
TreatListComponent,
MyTreatComponent

],

+6

, :

  1. , , .
  2. entryComponents.

const routes: Routes = [{ path: 'confirm-component', component: ConfirmComponent,data: {}}]

entryComponents: [
ConfirmComponent
} 

, entryComponents .

  1. component.drawback , URL.
  2. entryComponents. URL, URL.
+6

,

:

    const appRoutes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'home', component: HomeComponent },
  { path: 'fundList',      component: FundListComponent },
];
+4

entryComponents - , , , .

imports: [
    NgbModule.forRoot(),
    ...
]

https://medium.com/@sunilk/getting-started-angular-6-and-ng-bootstrap-4-4b314e015c1c

entryComponents, . :

. entryComponents NgModule.

+2

ag-grid . , ag-grid.withComponents []

: [StratoMaterialModule, BrowserModule, AppRoutingModule, HttpClientModule, BrowserAnimationsModule, NgbModule.forRoot(), FormsModule, ReactiveFormsModule, AppRoutingModule, AgGridModule.withComponateBoponent)()

+2

. , ComponentFactoryResolver , , , , .

+1

entryComponents , ng serve - .

0

Debe agregarse el Componentte a importar en entryComponents

declarations: [
        AppComponent,
        ChatComponent
    ],
  entryComponents: [
        ChatComponent
    ],
0

NgbModal .html

0

All Articles