Saltar al contenido

¿Qué es EntryComponents en angular ngModule?

Solución:

Esto es para componentes agregados dinámicamente que se agregan usando ViewContainerRef.createComponent(). Agregándolos a entryComponents le dice al compilador de plantillas fuera de línea que las compile y cree fábricas para ellas.

Los componentes registrados en las configuraciones de ruta se agregan automáticamente a entryComponents también porque router-outlet también usa ViewContainerRef.createComponent() para agregar componentes enrutados al DOM.

El compilador de plantillas sin conexión (OTC) solo crea componentes que se utilizan realmente. Si los componentes no se utilizan directamente en las plantillas, el OTC no puede saber si es necesario compilarlos. Con entryComponents puede decirle al OTC que también compile estos componentes para que estén disponibles en tiempo de ejecución.

¿Qué es un componente de entrada? (angular.io)

Documentos de NgModule (angular.io)

Define los componentes que también deben compilarse cuando se define este componente. Para cada componente enumerado aquí, Angular creará un ComponentFactory y lo almacenará en ComponentFactoryResolver.

Si no enumera un componente agregado dinámicamente a entryComponents Recibirá un mensaje de error sobre una fábrica faltante porque Angular no habrá creado una.

Consulte también https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html

No obtendrá una explicación mejor que Angular docs: entry-components y ngmodule-faq.

Y a continuación está la explicación de los documentos angulares.

Un componente de entrada es cualquier componente que Angular carga imperativamente por tipo.

Un componente cargado declarativamente a través de su selector no es un componente de entrada.

La mayoría de los componentes de la aplicación se cargan de forma declarativa. Angular usa el selector del componente para ubicar el elemento en la plantilla. Luego crea la representación HTML del componente y la inserta en el DOM en el elemento seleccionado. Estos no son componentes de entrada.

Algunos componentes solo se cargan dinámicamente y nunca se hace referencia a ellos en una plantilla de componente.

La raíz arrancada AppComponent es un componente de entrada. Es cierto que su selector coincide con una etiqueta de elemento en index.html. Pero index.html no es una plantilla de componente y el AppComponent selector no coincide con un elemento en ninguna plantilla de componente.

Angular carga AppComponent dinámicamente porque está listado por tipo en @NgModule.bootstrap o reforzado imperativamente con el método ngDoBootstrap del módulo.

Los componentes de las definiciones de ruta también son componentes de entrada. Una definición de ruta se refiere a un componente por su tipo. El enrutador ignora el selector de un componente enrutado (si es que tiene uno) y carga el componente dinámicamente en un RouterOutlet.

El compilador no puede descubrir estos componentes de entrada buscándolos en otras plantillas de componentes. Debes contarlo sobre ellos agregándolos al entryComponents lista.

Angular agrega automáticamente los siguientes tipos de componentes al módulo entryComponents:

  • El componente en el @NgModule.bootstrap lista.
  • Componentes a los que se hace referencia en la configuración del enrutador.

No es necesario que menciones estos componentes explícitamente, aunque hacerlo es inofensivo.

Las otras respuestas mencionan esto, pero el resumen básico es:

  • es necesario cuando un componente NO se usa dentro de una plantilla html <my-component />
  • Por ejemplo, cuando usa componentes de diálogo Material angular, usa el componente indirectamente.

Los componentes del diálogo de material se crean dentro del código TS y no en la plantilla:

    const dialogRef = this.dialog.open(MyExampleDialog, { width: '250px' });
  }

Esto requiere que lo registre como un componente de entrada:

  • entryComponents: [MyExampleDialog]

De lo contrario, obtendrá un error:

  • ERROR Error: No component factory found for MyExampleDialog. Did you add it to @NgModule.entryComponents?
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *