首页 文章

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

提问于
浏览 次
52

我正在将我的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']
})

怎么了？

angular upgrade

6 回答

  • 73

    我有同样的问题从RC5转到Final，我花了一点时间才找到答案 . 记住我收到警告信息后，我终于找到了答案"NgModule AppModule uses LoginComponent via " LoginComponent " but it was neither declared nor imported! This warning will become an error after final."当我终于查看该错误信息时，我发现我的答案可能与您的相似 . 我找到了答案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';

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

    希望它可能有所帮助 .

    回复于
  • 11

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

    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
            ],

    问题是固定的 .

    回复于
  • 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 的组件..只需在浏览器控制台选项卡中单击日志语句的输出以获取详细信息 .

    完成后删除日志语句 .

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

    回复于
  • 5

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

    回复于
  • 8

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

    回复于
  • 30

    在我的案例中，问题在于 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" 的文件夹的更改

    回复于

相关问题