modules - export component angular 6

¿Qué es entryComponents en angular ngModule?

Question

Estoy trabajando en una aplicación Ionic ( 2.0.0-rc0 ) que depende de angular 2 . Por lo ngModules se incluye la nueva introducción de ngModules . Estoy agregando mi app.module.ts. abajo.

import { NgModule } from ''@angular/core'';
import { IonicApp, IonicModule } from ''ionic-angular'';
import { MyApp } from ''./app.component'';
import { Users } from ''../pages/users/users'';

@NgModule({
  declarations: [
    MyApp,
    Users
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    Users
  ]
})
export class AppModule {}

¿Qué hace entryComponents aquí? Components ya están definidos en las declarations . Entonces, ¿cuál es la necesidad de repetirlos? ¿Qué pasaría si no incluyo un componente aquí?

Answer 1

Un poco de antecedentes sobre entryComponent

entryComponent es cualquier componente de cargas angulares imperativo. Puede declarar entryComponent NgModule en NgModule o en definiciones de ruta.

@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpClientModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] // bootstrapped entry component })

https://angular.io/guide/entry-components dice a continuación

Para contrastar los dos tipos de componentes, hay componentes que se incluyen en la plantilla, que son declarativos. Además, hay componentes que debe cargar imperativamente; es decir, componentes de entrada.

Ahora para responder a su pregunta específica sobre entryComponents

Hay entryComponents matriz @NgModule en el archivo @NgModule . Puede usar esto para agregar entryComponents si el componente se entryComponents mediante ViewContainerRef.createComponent() .

Es decir, está creando componentes dinámicamente y no mediante bootstrapping o en plantilla.

const componentFactory = this.componentFactoryResolver.resolveComponentFactory(myComp.component); const viewContainerRef = this.compHost.viewContainerRef; viewContainerRef.clear(); const componentRef = viewContainerRef.createComponent(componentFactory);

Answer 2

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

Los componentes registrados en las configuraciones de ruta también se agregan automáticamente a entryComponents porque el 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 realmente se usan. Si los componentes no se usan directamente en las plantillas, el OTC no puede saber si es necesario compilarlos. Con entryComponents, puede indicarle 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 que falta porque Angular no habrá creado uno.

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

Answer 3

La matriz entryComponents se usa para definir solo componentes que no se encuentran en html y se crean dinámicamente. Angular requiere esta sugerencia para encontrar el componente de entrada y compilarlos.

Hay dos tipos principales de componentes de entrada:

• El componente raíz bootstrapped.
• Un componente que especifique en una definición de ruta.

Para obtener información más detallada sobre los componentes de entrada, consulte angular.io https://angular.io/guide/entry-components

Answer 4

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 se usan componentes de diálogo de Material angular, se usa el componente indirectamente.

Los componentes de 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 registres como una entradaComponente:

• entryComponents: [MyExampleDialog]

De lo contrario, obtienes un error:

• ERROR Error: No component factory found for MyExampleDialog. Did you add it to @NgModule.entryComponents?

Answer 5

No obtendrá una explicación mejor que los https://angular.io/guide/entry-components

Y a continuación se muestra la explicación de los documentos angulares.

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

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

La mayoría de los componentes de la aplicación se cargan declarativamente. 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 en una plantilla de componente.

AppComponent raíz de bootstrapped 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 selector de AppComponent no coincide con un elemento en ninguna plantilla de componente.

Angular carga AppComponent dinámicamente porque se enumera por tipo en @NgModule.bootstrap o se @NgModule.bootstrap imperativa con el método ngDoBootstrap del módulo.

Los componentes en 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 incluso 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. Debe contarlo acerca de ellos agregándolos a la lista entryComponents .

Angular agrega automáticamente los siguientes tipos de componentes a los componentes de entrada del módulo:

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

No tiene que mencionar estos componentes explícitamente, aunque hacerlo es inofensivo.