Angular 2 组件不属于任何 NgModule

Question

我正在将我的 Angular 2 项目从 RC5 升级到 2.0.0。我得到这个错误

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);

应用模块：

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 uses LoginComponent via "LoginComponent" 但它既未声明也未导入！此警告将在最终后成为错误。"当我最终查看该错误消息时，我发现我的答案可能与您的相似。我找到了答案。

这个 post 让我知道的是，在我的 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

我有同样的错误。我有很多组件，在 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.");

日志语句显示您忘记将哪个组件添加到 app.module.ts .. 只需单击浏览器控制台选项卡中日志语句的输出即可了解详细信息。

完成后删除日志语句。

注意：确保您使用的是编译器。umd.js（不是 compiler.umd.min.js）在您的 SystemJS 配置文件中。

Answer 3

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

Answer 4

同样的问题，我已经解决了。

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 5

在我的例子中，问题出在 app.routing.ts 和 app.module.ts 中的大小写差异。我们需要确保我们在两个位置指定了相同大小写的相同路径。

早些时候

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

解决方案

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

注意，文件夹名称的变化 "Components"

Answer 6

确保在引用 app.routing.ts 和 app.module.ts.

中都包含新组件

Answer 7

就我而言，我使用的是 angular material 对话框。我忘了在 NgModule 中包含对话框。 Dialog 需要在 NgModule 和 entryComponents 中都存在。

Answer 8

如果您的应用或功能模块没有导入应用中正在使用的所有其他模块，也会发生此错误。

Answer 9

确保您的组件已导入 app.module.ts。就我而言，这是原因我忘了在声明中包含该组件

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    IndexComponent
  ],
  imports: [
    BrowserModule, FormsModule, HttpClientModule, RouterModule.forRoot(routes)
  ],
  exports: [RouterModule],
  providers: [],
  bootstrap: [AppComponent]
})

还要确保在添加新模块和组件时重新启动服务器，同时 ng serve 这也是发生此问题时的一个原因。所以，基本的解决办法就是退出服务器，重新开始服务。

Angular 2 组件不属于任何 NgModule

Angular 2 Component is not part of any NgModule

upgrade

angular

早些时候

解决方案