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?

Gaudy

Can you please add the LoginComponent? at least the @Componentannotation of this component, no need to paste the whole component. – Laterite

i added the @component – Gaudy

Can you please add the app.routing.ts file ? – Mcnair

Answer 1

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.

Ferbam

Or invalid path, as it was in my case. – Lashonlashond

In my case I just loss it to add to some modules list, but seems I got direction in your answer, thanks. – Windfall

what about, if the component is not for routing. – Enwreathe

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.

Gallo

Answer 3

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.

Doublejointed

Answer 4

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.

Waldack

Answer 5

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

Pectoralis

Answer 6

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"

Kessinger

Answer 7

In my case, I was using angular material dialog. I have forgot to include the dialog in NgModule. Dialog need to be there in both NgModule and entryComponents.

Kiri

Answer 8

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

Holarctic

Answer 9

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.

Perforate