Angular 2 组件不是任何 NgModule 的一部分答案

【问题标题】：Angular 2 Component is not part of any NgModuleAngular 2 组件不是任何 NgModule 的一部分
【发布时间】：2017-01-24 11:03:10
【问题描述】：

我正在将我的 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);

应用模块：

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({
    selector: 'Login',
    templateUrl: 'App/Login/Login.html',
    providers: [LoginService],
    styleUrls: ['App/Login/Login.css']
})

怎么了？

【问题讨论】：

您能添加 LoginComponent 吗？至少这个组件的@Componentannotation，不需要粘贴整个组件。
我添加了@component
能否添加app.routing.ts文件？

标签： angular upgrade

【解决方案1】：

我在从 RC5 迁移到 Final 时遇到了同样的问题，我花了一些时间才找到答案。在记得我收到警告消息“NgModule AppModule 通过“LoginComponent”使用 LoginComponent 但它既没有声明也没有导入！这个警告在最终之后将成为错误之后，我终于找到了答案。”当我最终查看该错误消息时，我发现我的答案可能与您的相似。我找到了我的答案here。

这篇文章让我明白的是，在我的 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';

因此，由于大小写不同，路由认为它加载的组件与模块不同，这意味着被拉入路由的组件与模块不同。

希望它可能会有所帮助。

【讨论】：

或无效路径，就像我的情况一样。
在我的情况下，我只是将其添加到某些模块列表中，但似乎我在您的回答中得到了指导，谢谢。
如果组件不用于路由，该怎么办。

【解决方案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
            ],

问题解决了。

【讨论】：

【解决方案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.");

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

完成后删除日志语句。

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

就我而言，问题在于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'

注意，文件夹名为“组件”

的变化

【讨论】：

【解决方案7】：

就我而言，我使用的是角度材质对话框。我忘记在 NgModule 中包含对话框。 Dialog 需要在 NgModule 和 entryComponents 中都有。

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

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

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

另外，请确保在添加新模块和组件时重新启动服务器，而 ng serve 它也是出现此问题时的原因。所以，基本的解决办法是退出服务器，重新ng服务。

【讨论】：