web-dev-qa-db-ja.com

Angular 2コンポーネントは、NgModuleの一部ではありません

Angular 2プロジェクトをRC5から2.0.0にアップグレードします。このエラーが出ます

未処理のPromise拒否：コンポーネントLoginComponentがNgModuleの一部ではないか、モジュールがモジュールにインポートされていません。 ;ゾーン： ;タスク：約束。値：エラー：Component

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

なにが問題ですか？

angularupgrade
55
Lyror

私はRC5から決勝に移動する同じ問題を抱えていた、そしてそれは私の答えを見つけるのに少し時間がかかった。 "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';

そのため、ルートは大文字と小文字の違いにより、モジュールとは異なるコンポーネントをロードすると考えられます。つまり、ルートに引き込まれるコンポーネントはモジュールと同じではありません。

それが役立つかもしれないことを願っています。

76
Joe W

ここで同じ問題と私はそれを解決しました。

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

そして問題は解決しました。

31
roll

私は同じエラーがありました。私はたくさんのコンポーネントを持っていて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 ..詳細については、ブラウザのコンソールタブにあるlogステートメントの出力をクリックするだけです。

完了したら、ログステートメントを削除します。

注：SystemJS構成ファイルでcompiler.umd.js（compiler.umd.min.jsではなく）を使用していることを確認してください。

11
danday74

上記のエラーは、関連コンポーネントを各コンポーネントのメインの「モジュール」セクションに含めないと発生します。そのため、そのコンポーネントがモジュール内に記載されていることを確認してください。

8
Dila Gurung

新しいコンポーネントを参照元のapp.routing.tsとapp.module.tsの両方に必ず含めてください。

5
Richard Bown

私の場合、問題は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"の場合の変更点

2
Manthan Devani

私の場合は、角材対話を使用していました。 NgModuleにダイアログを含めるのを忘れてしまいました。ダイアログはNgModuleとentryComponentsの両方に存在する必要があります。

0
heeraj123