¿Qué es entryComponents en angular ngModule?

El componente de entrada es el componente que carga angular por la fuerza, lo que significa que estos componentes no están referenciados en la plantilla HTML. En la mayoría de los casos, Angular carga un componente cuando se declara explícitamente en la plantilla del componente. Pero este no es el caso con entryComponents. Los componentes de entrada solo se cargan dinámicamente y nunca se hace referencia a ellos en la plantilla del componente. Se refiere a la array de componentes que no se encuentran en HTML, sino que los agrega ComponentFactoryResolver.

En primer lugar, Angular crea una fábrica de componentes para cada uno de los componentes de entrada de arranque de la clase ComponentFactoryResolver y luego, en tiempo de ejecución, utilizará las fábricas para instanciar los componentes.

abstract class ComponentFactoryResolver {
  static NULL: ComponentFactoryResolver
  abstract resolveComponentFactory(component: Type): ComponentFactory
}

Tipos de componentes de entrada en Angular:

1. El componente raíz con arranque
2. Componente enrutado (un componente que especifica en una ruta)

Componente de entrada de arranque: en el momento del inicio de la aplicación o durante el proceso de arranque, Angular carga el componente de arranque en DOM (Modelo de objetos de documento).

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

El componente de arranque es un componente de entrada que proporciona el punto de entrada a la aplicación. Angular carga AppComponent de forma predeterminada, tal como aparece en @ NgModule.bootstrap .

aplicación.módulo.ts

Componente de entrada enrutado: este tipo de componentes son componentes declarados y se agregan como una array dentro de la sección de declaraciones de la aplicación. Sin embargo, es posible que deba hacer referencia a un componente por su clase. Los componentes del enrutador no se especifican explícitamente en el HTML de un componente, pero están registrados en la array de rutas. Estos componentes también se cargan dinámicamente y, por lo tanto, Angular necesita conocerlos.
Estos componentes se agregan en dos lugares:

• enrutador
• entradaComponentes

app-routing.module.ts

import { NgModule } from '@angular/core';
import {  RouterModule, Routes } from '@angular/router';
import { ListComponent } from './list/list.component';
import { DetailComponent } from './detail/detail.component';
  
const routes: Routes = [
  {
     path:'',
     redirectTo:'/contact', 
     pathMatch:'full'
  },
  {
    path: 'list',
    component: ListComponent
  },
  {
    path: 'detail',
    component: DetailComponent
  },
  { 
    path:'**',
    redirectTo:'/not-found'
  }
];
@NgModule({
    imports:[RouterModule.forRoot(routes)],
    exports:[RouterModule]
  
})
export class AppRoutingModule{
  
}

No necesita agregar el componente a la array entryComponent explícitamente, Angular lo hace automáticamente. El compilador agrega todo el componente del enrutador a la array entryComponent.

Necesidad de array de componentes de entrada: Angular solo incluye aquellos componentes en el paquete final al que se ha hecho referencia en la plantilla. Esto se hace para reducir el tamaño del paquete final al no incluir componentes no deseados. Pero esto rompería la aplicación final ya que todos los componentes de entrada nunca se incluirían en el paquete final (ya que nunca se les ha hecho referencia). Por lo tanto, debemos registrar estos componentes en la array entyComponents para Angular para incluirlos en el paquete.