Angular 2 Component不是任何NgModule的一部分

Question

我正在将我的Angular 2项目从RC5升级到2.0.0.我收到此错误

未处理的Promise拒绝:组件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']
})

怎么了？

Answer 1

我有同样的问题从RC5转到Final,我花了一点时间才找到答案.我终于找到了答案,记得我收到了警告信息"NgModule AppModule通过"LoginComponent"使用LoginComponent但是它既没有声明也没有导入!这个警告在最终结束后会变成错误." 当我终于查看该错误消息时,我发现我的答案可能与您的相似.我在这里找到了答案.

这篇文章让我了解的是,在我的app.module.ts文件中,我已经将我的组件声明如下:

app.module:

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

但在我的路线文件中,它是以下内容:

import { AccountComponent, AccountDetails } from './Account/Index'; import { LoginComponent, ResetPasswordComponent } from './Login/Index';

所以路由认为它加载不同的组件,则模块由于资本化,这意味着被拉的那些进路是不相同的那些模块的差异.

希望它可能有所帮助.

Answer 2

同样的问题在这里,我解决了它.

1)您创建组件

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

2)你应该在app.module.ts中声明它

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

问题是固定的.

Answer 3

我有同样的错误.我有很多组件,并且在app.module.ts中错过了一些,但我不确定哪些.

我发现通过添加日志语句来...

/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.");

log语句显示您忘记添加到app.module.ts的组件 ..只需在浏览器控制台选项卡中单击日志语句的输出以获取详细信息.

完成后删除日志语句.

注意:确保在SystemJS配置文件中使用compiler.umd.js(NOT compiler.umd.min.js).

Answer 4

当您在相应组件的主"模块"部分中不包含关联组件时,会产生上述错误.因此,请确保模块中提到组件.

Answer 5

确保在引用app.routing.ts和app.module.ts中包含新组件.