Angular 2 구성 요소는 NgModule의 일부가 아닙니다.

Angular 2 구성 요소는 NgModule의 일부가 아닙니다.

---

Angular 2 프로젝트를 RC5에서 2.0.0으로 업그레이드하고 있습니다. 이 오류가 발생합니다.

처리되지 않은 약속 거부 : 구성 요소 LoginComponent가 NgModule의 일부가 아니거나 모듈을 모듈로 가져 오지 않았습니다. ; 구역 :; 작업 : Promise.then; 값 : 오류 : 구성 요소

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 로그인 :

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

뭐가 잘못 되었 니?

---

RC5에서 Final으로 이동하는 데 동일한 문제가 있었고 내 대답을 찾는 데 약간의 시간이 걸렸습니다. "NgModule AppModule은"LoginComponent "를 통해 LoginComponent를 사용하지만 선언되거나 가져 오지 않았습니다.이 경고는 최종 오류가됩니다."라는 경고 메시지를받은 것을 기억하고 마침내 답을 찾았습니다. 마침내 그 오류 메시지에 대해 보았을 때 귀하와 비슷한 대답을 찾았습니다. 여기 에서 내 대답을 찾았 습니다 .

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.

ReferenceURL : https://stackoverflow.com/questions/39527722/angular-2-component-is-not-part-of-any-ngmodule