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但是既没有声明也没有导入！这个警告在最终结束后会变成错误。”当我终于查看该错误消息时，我发现我的答案可能与您的相似。我找到了答案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';

因此，由于大写字母的差异，路径认为其加载了与模块不同的组件，这意味着被拉入路径的组件与模块不同。

希望它可能有所帮助。

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

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

完成后删除日志语句。

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

Answer 4

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

Answer 5

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

Answer 6

就我而言，问题在于app.routing.ts和app.module.ts中的大写差异。我们需要确保在两个位置都指定相同的情况下使用相同的路径。

早些时候

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

解决方案

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

请注意，名为＆＃34;组件＆＃34;

的文件夹的更改

Answer 7

就我而言，我正在使用角度材质对话框。我忘记将对话框包含在NgModule中。对话框必须同时存在于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]
})

还要确保在添加新模块和组件时重新启动服务器，而这会在发生此问题时重新启动。因此，基本的解决方案是退出服务器，然后再次提供服务。

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

9 个答案:

早些时候

解决方案