Angular 4: no se encontró fábrica de componentes, ¿lo agregó a @ NgModule.entryComponents?

Estoy usando la plantilla Angular 4 con webpack y tengo este error cuando intento usar un componente (ConfirmComponent):

No se encontró fábrica de componentes para ConfirmComponent. ¿Lo agregó a @ NgModule.entryComponents?

El componente se declara en app.module.server.ts

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

También tengo app.module.browser.tsyapp.module.shared.ts

¿Cómo puedo arreglar eso?

Agrega esto en tu module.ts,

declarations: [
  AppComponent,
  ConfirmComponent
]

si ConfirmComponent está en otro módulo, debe exportarlo allí para poder usarlo afuera, agregue:

exports: [ ConfirmComponent ]

--- Actualice Angular 9 u Angular 8 con Ivy explícitamente habilitado ---

Los componentes de entrada con Ivy ya no son necesarios y ahora están en desuso

--- para Angular 9 y 8 con Ivy desactivada ---

En el caso de un componente cargado dinámicamente y para que se genere un ComponentFactory, el componente también debe agregarse a la entradaComponentes del módulo:

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

de acuerdo con la definición de entryComponents

Especifica una lista de componentes que deben compilarse cuando se define este módulo. Para cada componente enumerado aquí, Angular creará un ComponentFactory y lo almacenará en ComponentFactoryResolver.

Ver los detalles sobre entryComponent:

Si está cargando algún componente de forma dinámica, entonces debe ponerlo en ambos declarationsy entryComponent:

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

TL; DR: Un servicio en ng6 con providedIn: "root"no puede encontrar ComponentFactory cuando el Componente no se agrega en entryComponentsof app.module .

¡Este problema también puede ocurrir si está utilizando angular 6 en combinación con la creación dinámica de un componente en un servicio!

Por ejemplo, crear una superposición:

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

  constructor(private _overlay: Overlay) {}

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

    overlayRef.attach(portal).instance;
  }
}

El problema es el

provideIn: "root"

definición, que proporciona este servicio en app.module .

Entonces, si su servicio se encuentra, por ejemplo, en el "OverlayModule", donde también declaró el OverlayExampleComponent y lo agregó a entryComponents, el servicio no puede encontrar ComponentFactory para OverlayExampleComponent.

Tuve el mismo problema. En este caso imports [...]es crucial, porque no funcionará si no importa NgbModalModule.

La descripción del error dice que los componentes deben agregarse a la entryComponentsmatriz y es obvio, pero asegúrese de haber agregado este en primer lugar:

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

Agregue ese componente a entryComponents en @NgModule del módulo de su aplicación:

entryComponents:[ConfirmComponent],

así como declaraciones:

declarations: [
    AppComponent,
    ConfirmComponent
]

Agregue 'NgbModalModule' en las importaciones y el nombre de su componente en entryComponents App.module.ts como se muestra a continuación

Coloque los componentes que se crean dinámicamente en entryComponents en la función @NgModuledecorator.

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

Tengo el mismo problema con angular 6, eso es lo que funcionó para mí:

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

})

Si tiene un servicio como ConfirmService , debe declararlo en los proveedores del módulo actual en lugar de root

Tuve el mismo problema con el modo de arranque

importar {NgbModal} desde '@ ng-bootstrap / ng-bootstrap';

Si este es su caso, simplemente agregue el componente a las declaraciones del módulo y los componentes de entrada como sugieren otras respuestas, pero también agregue esto a su módulo

importar {NgbModule} desde '@ ng-bootstrap / ng-bootstrap';

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

Este error ocurre cuando intenta cargar un componente dinámicamente y:

1. El componente que desea cargar no es el módulo de enrutamiento
2. El componente no está en el módulo entryComponents.

en routingModule

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

o en módulo

entryComponents: [
ConfirmComponent
} 

Para corregir este error, puede agregar un enrutador al componente o agregarlo a entryComponents del módulo.

1. Agregue un enrutador a component.drawback de este enfoque es su componente será accesible con esa url
2. Agréguelo a entryComponents. en este caso, su componente no tendrá ninguna url asociada y no será accesible con url.

Tuve el mismo problema en Angular7 cuando creo componentes dinámicos. Hay dos componentes (TreatListComponent, MyTreatComponent) que deben cargarse dinámicamente. Acabo de agregar la matriz entryComponents en mi archivo app.module.ts.

    entryComponents: [
    TreatListComponent,
    MyTreatComponent
  ],

si usa enrutamiento en su aplicación

asegúrese de agregar nuevos componentes a la ruta de enrutamiento

por ejemplo :

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

En mi caso, no necesitaba inputComponents en absoluto, solo la configuración básica como se describe en el siguiente enlace, pero necesitaba incluir la importación tanto en el módulo principal de la aplicación como en el módulo adjunto.

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

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

Solo necesita agregarlo a entryComponents si se incluirá un componente en el modal. De los documentos:

Puede pasar un componente existente como contenido de la ventana modal. En este caso, recuerde agregar el componente de contenido como una sección de entradaComponentes de su NgModule.

Estaba teniendo el mismo problema con ag-grid usando componentes dinámicos. Descubrí que necesitas agregar el componente dinámico al módulo ag-grid .withComponents []

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

En mi caso, olvidé agregar MatDialogModulea las importaciones en un módulo secundario.

Para aclarar aquí. En caso de que no lo esté utilizando ComponentFactoryResolverdirectamente en el componente y desee abstraerlo al servicio, que luego se inyecta en el componente, debe cargarlo en los proveedores para ese módulo, ya que si se carga de manera diferida no funcionará.

En caso de que aún tenga el error después de proporcionar la clase de diálogo de componente entryComponents, intente reiniciar ng serve, funcionó para mí.

Mi error fue llamar al método abierto NgbModal con parámetros incorrectos de .html

Debe importar el NgbModuleen el módulo de esta manera:

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

1. entryComponentsEs vital. Las respuestas anteriores sobre esto son correctas.

Pero...

2. Si está proporcionando un servicio que abre el modal (un patrón común) y su módulo que define el componente de diálogo no está cargado en AppModule, debe cambiar providedIn: 'root'a providedIn: MyModule. Como buena práctica general, solo debe usar providedIn: SomeModulepara todos los servicios de diálogo que están en módulos.

Estoy usando Angular8, y estoy tratando de abrir el componente dinámicamente para formar otro módulo . En este caso, debe import the moduleingresar al módulo que está tratando de abrir el componente, por supuesto, además export del componente y enumerarlo en la entryComponentsmatriz como lo hicieron las respuestas anteriores.

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

En mi caso, resolví este problema:
1) colocando NgxMaterialTimepickerModuleen app module imports:[ ]
2) colocando NgxMaterialTimepickerModuleen testmodule.ts imports:[ ]
3) colocando testcomponenten declartions:[ ]yentryComponents:[ ]

(Estoy usando la versión angular 8+)

Declarar todas las páginas nuevas en 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
  ],

 - 


----------


---------