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

boilerplate angular 6

Question

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.ts y app.module.shared.ts

¿Cómo puedo arreglar eso?

Answer 1

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

Answer 2

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

entryComponents:[ConfirmComponent],

así como declaraciones:

declarations: [
    AppComponent,
    ConfirmComponent
]

Answer 3

Agregue esto en su module.ts ,

declarations: [
  AppComponent,
  ConfirmComponent
]

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

exports: [ ConfirmComponent ]

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

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

según 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.

Answer 4

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
    ]
})

Answer 5

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

Answer 6

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.

Answer 7

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 ,

Answer 8

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.

Answer 9

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

Answer 10

Para aclarar aquí. En caso de que no esté utilizando ComponentFactoryResolver directamente 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 lentamente no funcionará.

Answer 11

TL; DR: Un servicio en ng6 con provideIn providedIn: "root" no puede encontrar ComponentFactory cuando el Componente no se agrega en la entryComponents de 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.

Answer 12

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

Answer 13

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(),
   ...
]

Answer 14

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

],

Answer 15

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

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

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

Answer 16

Vea los detalles sobre entryComponent :

Si está cargando cualquier componente dinámicamente, entonces debe ponerlo en las declarations y en el entryComponent :

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

Answer 17

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 },
];