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 NgModule or the module has not been imported into your module. ; Zone: ; Task: Promise.then ; Value: Error: Component

Main.ts:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

AppModule:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { AppComponent }  from './app.component';
import {RouterModule} from "@angular/router";
import {AppsAdminComponent} from './AppsAdmin/AppsAdmin.component';
import {AppsManagerComponent} from './AppsManager/AppsManager.component';
import {LoginComponent} from './Login/Login.component';
import {LogoutComponent} from './Logout/logout.component';
import { Routing }  from './App.routing';
import {HttpModule} from '@angular/http';
//import {AppsManagerService} from './Service/AppsManager.service';
import {GlobalService} from './Service/GlobalService';
import {Webservice} from './Service/Webservice';

@NgModule({
    declarations: [
        AppComponent,
        LoginComponent,
        LogoutComponent,
        AppsAdminComponent,
        AppsManagerComponent
    ],
    imports: [
        BrowserModule,
        HttpModule,
        FormsModule,
        Routing
    ],
    providers: [
        GlobalService,
        Webservice

    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule {
}

Login @Component:

@Component({
    selector: 'Login',
    templateUrl: 'App/Login/Login.html',
    providers: [LoginService],
    styleUrls: ['App/Login/Login.css']
})

What is wrong?

Answer 1

The mentioned error is produced when you do not include associated components in main "module" section of the respective component. So ensure that the component is mentioned there in module.

Answer 2

Same issue here and i solved it.

1) You create your component

            import { Component } from '@angular/core';
            @Component({
              moduleId:module.id,
              selector: 'page-home',
              templateUrl:'HomeComponent.html',
            })
            export class HomeComponent  { }

2) You should declare it in app.module.ts

            import {HomeComponent}  from './Components/Pages/Home/HomeComponent';
            ...
            declarations: [ 
                AppComponent,
                HomeComponent
            ],

And the problem is fixed.

Answer 3

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

Answer 4

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.

Answer 5

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 6

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.