Recent builds from Angular2 complain: NgModule DynamicModule uses HomeComponent through "entryComponents",

Question

Starting with the switch to the latest Angular 2 builds (i.e. github, master), I get the following warnings about all my components:

NgModule DynamicModule uses the HomeComponent through "entryComponents", but it has not been declared or imported! This warning will be a mistake after the final.

I get the same error message for all my components except HomeComponent .

Can anyone provide information about them?

Answer 1

That caught me too. Significant changes in RC5 are the way you route and load with great support on the app.module.ts and @NgModule . The documentation has been updated here: https://angular.io/docs/ts/latest/ and the change log: https://github.com/angular/angular/blob/master/CHANGELOG.md

The main changes to the routing file are changes to the import and export statements. The following is a simple example that has two components: AppComponent and HomeComponent , which serves as the HomeComponent from index.html :

File: 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);` 

Then you need to use the NgModule file:

File: 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 { } 

And then you need to pull the AppModule into main.ts and load it using it.

File: main.ts

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

This template does not display a console warning message.

Answer 2

There is one more thing that should be careful about this warning.

I got it, although I actually recited the component in my module, and it pushed me to the wall because everything looked right.

So, I went through compiler.umd.js, where a warning occurred, and I noticed that the component for which I was getting the error was added to the array of directives twice here:

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

In principle, although the component was already in the Set directive, transitiveModule.directivesSet.has (dirMeta.type.runtime) evaluated false, so it was added again, and one of them raised a warning.

It turned out that the import statements in my routing file and my module file were slightly different. One headed the first letter of the directory in the path, while the other directory had everything lowercase:

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

As soon as I changed so that the paths coincided, the warning disappeared. Everything else seemed to be functioning properly with an inappropriate housing.

Answer 3

you also need to add each component to your routes to NgModule ads. Lots of patterns. See here angular https://github.com/angular/angular/issues/10472

Answer 4

I have the same problem, but on the test part.

WARN: "The RootCmp component in NgModule DynamicTestModule uses BlankCmp through the" entryComponents ", but it was not declared or imported! This warning will become an error after the final.

How to configure DynamicTestModule?

Answer 5

If you are updating a large code base, none of these answers tells you which component you forgot to add to app.module.ts

The closest answer (if this is your problem) is set using @doubletriplezero

He mentions that compiler.umd.js has some useful information.

In fact, this may indicate exactly which component you forgot to import. Cm

Angular 2 Component is not part of any NgModule

for a more complete answer