Latest builds from Angular2 complain with: NgModule DynamicModule uses HomeComponent via "entryComponents"

Question

Since switching to the latest builds of Angular 2 (i.e. on github, master), I get warnings as follows about all my components:

NgModule DynamicModule uses HomeComponent via "entryComponents" but it was neither declared nor imported! This warning will become an error after final.

I get the same error message for all my components, in addition to HomeComponent.

Can anyone please provide information about those?

Answer 1

This caught me out too. Significant changes in RC5 to the way that you route and bootstrap with a significant reliance on app.module.ts and @NgModule decorator. The documentation has been updated here: https://angular.io/docs/ts/latest/ and the changelog here: https://github.com/angular/angular/blob/master/CHANGELOG.md

Main changes to the routing file are changes to the import and export statements. A simple example is illustrated below which has two components, AppComponent and HomeComponent, that serves 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);`

You then need to use an 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 in AppModule to main.ts and bootstrap using it.

File: main.ts

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

This pattern does not produce the console warning message.

Answer 2

There's one other thing to be careful of with regard to this warning.

I was receiving it even though I was in fact declaring the component in my module and it was driving me up the wall because everything looked to be correct.

So I stepped through compiler.umd.js where the warning was getting generated and I noticed that the component for which I was getting the error was being 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;
        }

Basically, even though the component was already in directivesSet, transitiveModule.directivesSet.has(dirMeta.type.runtime) was evaluating to false so it was getting added again and one of these was causing the warning to appear.

It turned out that the import statements in my routing file and my module file were slightly different. One capitalized the first letter of a directory in the path, whereas in the other the directory was in all lowercase like so:

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

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

Once I changed so the paths matched, the warning went away. Everything else seemed to function properly with the mismatched casing.

Answer 3

you also need to add every component in your routes to your NgModule declarations. Lots of boilerplate. See angular issue here https://github.com/angular/angular/issues/10472

Answer 4

I have the same issue but on the testing part.

WARN: 'Component RootCmp in NgModule DynamicTestModule uses BlankCmp via "entryComponents" but it was neither declared nor imported into the module! This warning will become an error after final.'

How to setup the DynamicTestModule ?

Answer 5

If you are upgrading a large codebase then none of these answers tell you which component you forgot to add to app.module.ts

The closest answer (if this is your problem) is given by @doubletriplezero

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

In fact this can tell you exactly which component you forgot to import. See

Angular 2 Component is not part of any NgModule

for a fuller answer