Angular 2 Component is not part of any NgModule

Question

i\'m upgrading my Angular 2 project from RC5 to 2.0.0. I get this Error

Unhandled Promise rejection: Component LoginComponent is not part of any NgM

Answer 1

I had the same error. I had a lot of components and had missed some out in app.module.ts but I was not sure which ones.

I found out by adding a log statement to ..

/node_modules/@angular/compiler/bundles/compiler.umd.js

// I ADDED THIS LOG STATEMENT
console.log('compType', String(compType));
// THIS LINE EXISTS ALREADY
throw new Error("Component " + stringify(compType) + " is not part of any NgModule or the module has not been imported into your module.");

The log statement shows you which component you forgot to add to app.module.ts .. just click the output of the log statement in the browser console tab for details.

Remove the log statement when you are done.

NOTE: Make sure you are using compiler.umd.js (NOT compiler.umd.min.js) in your SystemJS config file.

Answer 2

Make it sure that your component is imported in app.module.ts. In my case that it was the reason where I forgot to include the component in the declaration

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    IndexComponent
  ],
  imports: [
    BrowserModule, FormsModule, HttpClientModule, RouterModule.forRoot(routes)
  ],
  exports: [RouterModule],
  providers: [],
  bootstrap: [AppComponent]
})

Also make sure you restart server when new modules and components are added while ng serve it is also a reaosn when this problem occur. So, the basic solution is to quit the server and ng serve again.

Answer 3

This error also occurs if your app or feature module does not import all the other modules which are being used in the app.

Answer 4

In My case, the problem was with the capitalization difference in app.routing.ts and app.module.ts. We need to make sure we have the same path with the same case specified in both the locations.

Earlier

app.routing.ts => import { HomeComponent } from './components/home.component';
app.module.ts => import { HomeComponent } from './Components/home.component'

Solution

app.routing.ts => import { HomeComponent } from './Components/home.component';
app.module.ts => import { HomeComponent } from './Components/home.component'

Note, the change in case of folder named "Components"

Answer 5

Ensure that you include your new component both in the referencing app.routing.ts as well as app.module.ts.

Answer 6

I had the same issue moving from RC5 to Final and it took me a bit to find my answer. I finally found my answer after remembering I was receiving warning messages "NgModule AppModule uses LoginComponent via "LoginComponent" but it was neither declared nor imported! This warning will become an error after final." When i finally looked about that error message I found my answer which might be similar to yours. I found my answer here.

What this post clued me in on was that in my app.module.ts file I had declared my components as the following:

app.module:

import { AccountComponent, AccountDetails } from './account/index'; import { LoginComponent, ResetPasswordComponent } from './login/index';

But in my routes file it was the following:

import { AccountComponent, AccountDetails } from './Account/Index'; import { LoginComponent, ResetPasswordComponent } from './Login/Index';

So the routes thinks its loading a different component then the module due to differences in the capitalization, which means the ones being pulled into the routes were not the same ones as the module.

Hope it might help.