Angular 2 Component is not part of any NgModule

Question

I am upgrading my Angular 2 project from RC5 to 2.0.0. I get this error

Refusing a raw promise: 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 { } 

@Component login:

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

What's wrong?

Answer 1

I had the same problem as switching from RC5 to Final, and it took me a bit to find my answer. Finally, I found my answer after I remembered that I was receiving warning messages. "The NgModule AppModule uses the LoginComponent through the" LoginComponent ", but it was neither advertised nor imported! This warning will be an error after the final." When I finally looked at this error message, I found my answer, which may be similar to yours. I found my answer here .

In this post, I was told that in my app.module.ts file, I stated that my components are as follows:

app.module:

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

But in my routes file there was the following:

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

Thus, the routes think that it loads another component and then the module due to differences in capitalization, which means that those that pull into the routes do not match the module.

Hope this helps.

Answer 2

Same problem 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 must declare it in app.module.ts

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

And the problem is fixed.

Answer 3

I had the same error. I had many components and skipped some of the 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 operator shows you which component you forgot to add to app.module.ts .. just click on the output of the log instructions on the browser console tab for details.

Remove the log statement when you are done.

NOTE. Make sure you use compiler.umd.js (NOT compiler.umd.min.js) in the SystemJS configuration file.

Answer 4

The indicated error occurs when you do not include related components in the main module section of the corresponding component. Therefore, make sure that the component is listed in the module.

Answer 5

Make sure you add your new component to both the app.routing.ts and app.module.ts links.

Answer 6

In my case, the problem was related to the difference in capitalization in app.routing.ts and app.module.ts . We need to make sure that we have the same path with the same case indicated in both places.

Earlier

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

Decision

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

Please note that in the case of a folder named "Components"

Answer 7

In my case, I used a dialog with corner material. I forgot to enable the dialog in NgModule. The dialog must be present in both NgModule and entryComponents.