Angolare 4: nessuna fabbrica di componenti trovata, l'hai aggiunta a @ NgModule.entryComponents?

Sto usando il modello Angular 4 con webpack e ho questo errore quando provo ad usare un componente (ConfirmComponent):

Nessuna fabbrica di componenti trovata per ConfirmComponent. L'hai aggiunto a @ NgModule.entryComponents?

Il componente è dichiarato in app.module.server.ts

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

Ho anche app.module.browser.tseapp.module.shared.ts

Come posso ripararlo?

Aggiungi questo nel tuo module.ts,

declarations: [
  AppComponent,
  ConfirmComponent
]

se ConfirmComponent si trova in un altro modulo, è necessario esportarlo lì in modo da poterlo utilizzare all'esterno, aggiungere:

exports: [ ConfirmComponent ]

--- Aggiorna Angular 9 o Angular 8 con Ivy esplicitamente abilitato ---

I componenti di entrata con Ivy non sono più necessari e ora sono obsoleti

--- per Angular 9 e 8 con Ivy disabilitato ---

Nel caso di un componente caricato dinamicamente e per generare un ComponentFactory, il componente deve essere aggiunto anche alla voce del modulo Componenti:

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

secondo la definizione di entryComponents

Specifica un elenco di componenti che devono essere compilati quando viene definito questo modulo. Per ogni componente elencato qui, Angular creerà un ComponentFactory e lo memorizzerà nel ComponentFactoryResolver.

Vedi i dettagli su entryComponent:

Se si carica dinamicamente un componente, è necessario inserirlo in entrambi declarationse entryComponent:

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

TL; DR: Un servizio in NG6 con providedIn: "root"non riesce a trovare il ComponentFactory quando il componente non viene aggiunto nel entryComponentsdi app.module .

Questo problema può verificarsi anche se si utilizza l'angolo 6 in combinazione con la creazione dinamica di un componente in un servizio!

Ad esempio, creando un 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;
  }
}

Il problema è il

fornitoIn: "root"

definizione, che fornisce questo servizio in app.module .

Pertanto, se il servizio si trova, ad esempio, nel "OverlayModule", in cui è stato dichiarato anche OverlayExampleComponent e aggiunto alla voceComponents, il servizio non è in grado di trovare ComponentFactory per OverlayExampleComponent.

Ho avuto lo stesso problema. In questo caso imports [...]è fondamentale, perché non funzionerà se non si importa NgbModalModule.

La descrizione dell'errore dice che i componenti dovrebbero essere aggiunti entryComponentsall'array ed è ovvio, ma assicurati di averlo aggiunto in primo luogo:

imports: [
    ...
    NgbModalModule,
    ...
  ],

Aggiungi quel componente a entryComponents in @NgModule del modulo della tua app:

entryComponents:[ConfirmComponent],

così come dichiarazioni:

declarations: [
    AppComponent,
    ConfirmComponent
]

Aggiungi 'NgbModalModule' nelle importazioni e il nome del tuo componente in entryComponents App.module.ts come mostrato di seguito

Posizionare i componenti creati dinamicamente in entryComponents nella funzione @NgModuledecorator.

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

Ho lo stesso problema con Angular 6, ecco cosa ha funzionato per me:

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

})

Se hai un servizio come ConfirmService , devi dichiararlo nei provider del modulo corrente anziché in root

Ho avuto lo stesso problema per il bootstrap modale

importare {NgbModal} da '@ ng-bootstrap / ng-bootstrap';

Se questo è il tuo caso, aggiungi il componente alle dichiarazioni del modulo e ai componenti entry come suggeriscono altre risposte, ma aggiungi anche questo al tuo modulo

importare {NgbModule} da '@ ng-bootstrap / ng-bootstrap';

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

Questo errore si verifica quando si tenta di caricare un componente in modo dinamico e:

1. Il componente che si desidera caricare non è il modulo di routing
2. Il componente non è presente nel modulo entryComponents.

in routingModule

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

o nel modulo

entryComponents: [
ConfirmComponent
} 

Per correggere questo errore è possibile aggiungere un router al componente o aggiungerlo a entryComponents del modulo.

1. Aggiungi un router a component.drawback di questo approccio se il tuo componente sarà accessibile con quell'URL.
2. Aggiungilo a entryComponents. in questo caso il tuo componente non avrà alcun URL collegato e non sarà accessibile con url.

Ho avuto lo stesso problema in Angular7 durante la creazione di componenti dinamici. Esistono due componenti (TreatListComponent, MyTreatComponent) che devono essere caricati in modo dinamico. Ho appena aggiunto l'array entryComponents al mio file app.module.ts.

    entryComponents: [
    TreatListComponent,
    MyTreatComponent
  ],

se usi il routing nella tua applicazione

assicurati di aggiungere nuovi componenti nel percorso di routing

per esempio :

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

Nel mio caso non avevo affatto bisogno di entryComponents - solo la configurazione di base come descritto nel link seguente, ma dovevo includere l'importazione sia nel modulo principale dell'app che nel modulo allegato.

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

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

Devi solo aggiungerlo a entryComponents se un componente sarà incluso nel modale. Dai documenti:

È possibile passare un componente esistente come contenuto della finestra modale. In questo caso, ricorda di aggiungere un componente di contenuto come sezione entryComponents di NgModule.

Stavo riscontrando lo stesso problema con ag-grid utilizzando componenti dinamici. Ho scoperto che è necessario aggiungere il componente dinamico al modulo ag-grid .withComponents []

importazioni: [StratoMaterialModule, BrowserModule, AppRoutingModule, HttpClientModule, BrowserAnimationsModule, NgbModule.forRoot (), FormsModule, ReactiveFormsModule, AppRoutingModule, AgGridModule.withComponents (ProjectUpdateButtonComponent) ],

Nel mio caso, ho dimenticato di aggiungere MatDialogModulealle importazioni in un modulo figlio.

Per chiarimenti qui. Nel caso in cui non si utilizzi ComponentFactoryResolverdirettamente nel componente e si desideri astrarlo per renderlo operativo, che viene quindi iniettato nel componente, è necessario caricarlo sotto i provider per quel modulo, poiché se il caricamento è lento non funzionerà.

Nel caso in cui tu abbia ancora l'errore dopo aver fornito la classe di dialogo del componente in entryComponents, prova a riavviare ng serve- ha funzionato per me.

Il mio errore stava chiamando il metodo aperto NgbModal con parametri errati da .html

Dovresti importare NgbModulenel modulo in questo modo:

@NgModule({
  declarations: [
    AboutModalComponent
  ],
  imports: [
    CommonModule,
    SharedModule,
    RouterModule,
    FormsModule,
    ReactiveFormsModule,
    NgxLoadingModule,
    NgbDatepickerModule,
    NgbModule
  ],
  entryComponents: [AboutModalComponent]
})
 export class HomeModule {}

1. entryComponentsè vitale. Le risposte sopra riportate sono corrette.

Ma...

2. Se stai fornendo un servizio che apre il modale (un modello comune) e il tuo modulo che definisce il componente della finestra di dialogo non viene caricato in AppModule, devi passare providedIn: 'root'a providedIn: MyModule. Come buona pratica generale dovresti semplicemente usare il providedIn: SomeModuleper tutti i servizi di dialogo che sono nei moduli.

Sto usando Angular8 e sto provando ad aprire il componente in modo dinamico da un altro modulo . In questo caso, devi import the moduleentrare nel modulo che sta provando ad aprire il componente, ovviamente oltre al export componente ed elencarlo entryComponentsnell'array come hanno fatto le risposte precedenti.

imports: [
    ...
    TheModuleThatOwnTheTargetedComponent,
    ...
  ],

Nel mio caso ho risolto questo problema:
1) sistemazione NgxMaterialTimepickerModulein app module imports:[ ]
2) mettendo NgxMaterialTimepickerModulein testmodule.ts imports:[ ]
3) porre testcomponentin declartions:[ ]eentryComponents:[ ]

(Sto usando la versione angolare 8+)

Dichiarare tutte le nuove pagine in app.module

@NgModule({
  declarations: [
    MyApp,
    RegisterPage,
    OtpPage,
    LoginPage,
    ForgetPasswordPage,ChatlistPage,ChatPage,TabsPage

    // AboutPage,

    // BusinessDetailDescPage,
    // BusinessDescPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot(),
    HttpClientModule,
    NgxBarcodeModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    RegisterPage,
    OtpPage,
    LoginPage,
    ForgetPasswordPage,ChatlistPage,ChatPage,TabsPage
    // AboutPage,

    // BusinessDetailDescPage,
    // BusinessDescPage
  ],

 - 


----------


---------