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?
@Componentannotation of this component, no need to paste the whole component.
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.
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.
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.
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.
Ensure that you include your new component both in the referencing app.routing.ts as well as app.module.ts.
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"
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.
This error also occurs if your app or feature module does not import all the other modules which are being used in the app.
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.
