ejemplos - Las últimas compilaciones de Angular2 se quejan con: NgModule DynamicModule usa HomeComponent a través de "entryComponents"

angular wikipedia

Question

Desde el cambio a las últimas versiones de Angular 2 (es decir, en github, master), recibo las siguientes advertencias sobre todos mis componentes:

NgModule DynamicModule usa HomeComponent a través de "entryComponents", ¡pero no fue declarado ni importado! Esta advertencia se convertirá en un error después de final.

Recibo el mismo mensaje de error para todos mis componentes, además de HomeComponent .

¿Alguien puede por favor proporcionar información acerca de esos?

Answer 1

Esto también me atrapó. Cambios significativos en RC5 en la forma en que app.module.ts y @NgModule con una dependencia significativa en app.module.ts y @NgModule decorator. La documentación se ha actualizado aquí: https://angular.io/docs/ts/latest/ y el registro de cambios aquí: https://github.com/angular/angular/blob/master/CHANGELOG.md

Los cambios principales en el archivo de enrutamiento son los cambios en las declaraciones de import y export . A continuación se ilustra un ejemplo simple que tiene dos componentes, AppComponent y HomeComponent , que sirve a HomeComponent desde index.html :

Archivo: app.routing.ts

import { Routes, RouterModule } from ''@angular/router'';

import { HomeComponent } from ''./home.component'';

const appRoutes: Routes = [
    {
        path: '''',
        redirectTo: ''/home'',
        pathMatch: ''full''
    },
    {
        path: ''home'',
        component: HomeComponent
    }
];

export const routing = RouterModule.forRoot(appRoutes);`

Entonces necesitas usar un archivo de NgModule:

Archivo: app.module.ts

import { NgModule }      from ''@angular/core'';
import { BrowserModule } from ''@angular/platform-browser'';

import { AppComponent }  from ''./app.component'';
import { HomeComponent } from ''./home.component'';

import { routing }        from ''./app.routing'';

@NgModule({
    imports:      [ BrowserModule, routing ],
    declarations: [ AppComponent, HomeComponent ],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

Y luego necesitas arrastrar AppModule a main.ts y bootstrap usándolo.

Archivo: main.ts

import { platformBrowserDynamic } from ''@angular/platform-browser-dynamic'';
import { AppModule } from ''./app.module'';
platformBrowserDynamic().bootstrapModule(AppModule);`

Este patrón no produce el mensaje de advertencia de la consola.

Answer 2

Hay otra cosa que hay que tener cuidado con respecto a esta advertencia.

Lo estaba recibiendo a pesar de que de hecho estaba declarando el componente en mi módulo y me estaba subiendo por la pared porque todo parecía correcto.

Así que pasé por compiler.umd.js donde se estaba generando la advertencia y noté que el componente para el que recibía el error se estaba agregando dos veces a la matriz de directivas aquí:

 if (force || !transitiveModule.directivesSet.has(dirMeta.type.runtime)) {
            transitiveModule.directivesSet.add(dirMeta.type.runtime);
            transitiveModule.directives.push(dirMeta);
            declaredDirectives.push(dirMeta);
            this._addTypeToModule(dirMeta.type.runtime, moduleType);
            return true;
        }

Básicamente, aunque el componente ya estaba en directivesSet, transitiveModule.directivesSet.has (dirMeta.type.runtime) se estaba evaluando como falso, por lo que se estaba agregando nuevamente y uno de estos estaba causando que apareciera la advertencia.

Resultó que las declaraciones de importación en mi archivo de enrutamiento y mi archivo de módulo eran ligeramente diferentes. Uno puso en mayúscula la primera letra de un directorio en la ruta, mientras que en el otro el directorio estaba en minúsculas, así:

//in routing
import { SomeComponent } from ''./Directory/some.component'';

//in app module
import { SomeComponent } from ''./directory/some.component'';

Una vez que cambié para que los caminos coincidieran, la advertencia desapareció. Todo lo demás parecía funcionar correctamente con la carcasa no coincidente.

Answer 3

Si está actualizando una base de código grande, ninguna de estas respuestas le dirá qué componente olvidó agregar a app.module.ts

La respuesta más cercana (si este es tu problema) está dada por @doubletriplezero

Menciona que compiler.umd.js tiene alguna información útil.

De hecho, esto puede indicarle exactamente qué componente olvidó importar. Ver

Angular 2 Component no es parte de ningún NgModule

para una respuesta más completa

Answer 4

Tengo el mismo problema pero en la parte de prueba.

WARN: ''¡El componente RootCmp en NgModule DynamicTestModule usa BlankCmp a través de "entryComponents" pero no fue declarado ni importado en el módulo! Esta advertencia se convertirá en un error después de la final ''.

¿Cómo configurar el DynamicTestModule?

Answer 5

también debe agregar todos los componentes de sus rutas a las declaraciones de NgModule. Un montón de repetitivo. Vea el problema angular aquí https://github.com/angular/angular/issues/10472