Angular2：エラー：モジュールによって宣言され、予期しない値「AppComponent」「AppModule」

Question

私はhttps://angular.io/docs/ts/latest/tutorial/toh-pt2.htmlでチュートリアルを作業や英雄の配列を作成した後、次のエラーを取得しています：

Error: Error: Unexpected value 'AppComponent' declared by the module 'AppModule' 
    at new BaseException (localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:5116:27) 
    at eval (localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:13274:35) 
    at Array.forEach (native) 
    at CompileMetadataResolver.getNgModuleMetadata (localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:13261:53) 
    at RuntimeCompiler._compileComponents (localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:15845:51) 
    at RuntimeCompiler._compileModuleAndComponents (localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:15769:41) 
    at RuntimeCompiler.compileModuleAsync (localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:15746:25) 
    at PlatformRef_._bootstrapModuleWithZone (localhost:3000/node_modules/@angular/core//bundles/core.umd.js:9991:29) 
    at PlatformRef_.bootstrapModule (localhost:3000/node_modules/@angular/core//bundles/core.umd.js:9984:25) 
    at Object.eval (localhost:3000/app/main.js:4:53) 
Evaluating localhost:3000/app/main.js 
Error loading localhost:3000/app/main.js 

マイアプリ。この時点でmodule.tsファイルは次のようになります。この時点で

import { NgModule }  from '@angular/core'; 
import { BrowserModule }from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 

import { AppComponent } from './app.component'; 

@NgModule({ 
    imports:  [ BrowserModule, FormsModule ], 
    declarations: [ AppComponent ], 
    bootstrap:  [ AppComponent ] 
}) 

export class AppModule {} 

マイapp.components.tsファイルは次のとおりです。

import { Component } from '@angular/core'; 

export class Hero { 
    id: number; 
    name: string; 
} 

@Component ({ 
    selector: 'my-app', 
    template: ` 
     <h1>{{title}}</h1> 

     <h2>My Heroes</h2> 
     <ul class="heroes"> 
      <li *ngFor="let hero of heroes"> 
       <span class="badge">{{hero.id}}</span> {{hero.name}} 
      </li> 
     </ul>   

     <h2>{{hero.name}} details!</h2> 
     <div><label>id: </label>{{hero.id}}</div> 
     <div> 
      <label>name: </label> 
      <input [(ngModel)]="hero.name" placeholder="name"> 
     </div> 
     ` 
}) 

const HEROES: Hero[] = [ 
    { id: 11, name: 'Mr. Nice' }, 
    { id: 12, name: 'Narco' }, 
    { id: 13, name: 'Bombasto' }, 
    { id: 14, name: 'Celeritas' }, 
    { id: 15, name: 'Magneta' }, 
    { id: 16, name: 'RubberMan' }, 
    { id: 17, name: 'Dynama' }, 
    { id: 18, name: 'Dr IQ' }, 
    { id: 19, name: 'Magma' }, 
    { id: 20, name: 'Tornado' } 
]; 

export class AppComponent { 
    title = 'Tour or Heroes'; 
    heroes = HEROES; 
} 

これまですべてがうまくいっていました。 Angularの新機能で、これをデバッグする方法が不明です。

編集：

エラー（インデックス）で発生時：デコレータの宣言は以下の通り

<!-- 2. Configure SystemJS --> 
    <script src = "systemjs.config.js"></script> 
    <script> 
     System.import('app').catch(function(err) { 
      console.error(err); 
     }); 
    </script> 
</head> 

おかげで、

Answer 1

デコレータが関連しているクラスまたは変数。

@compomentデコレータはconst HEROES以上であり、これはクラスAppComponent以上である必要があります。

だからあなたのコードは、次のようになります。

import { Component } from '@angular/core'; 

export class Hero { 
    id: number; 
    name: string; 
} 


export const HEROES: Hero[] = [ 
    { id: 11, name: 'Mr. Nice' }, 
    { id: 12, name: 'Narco' }, 
    { id: 13, name: 'Bombasto' }, 
    { id: 14, name: 'Celeritas' }, 
    { id: 15, name: 'Magneta' }, 
    { id: 16, name: 'RubberMan' }, 
    { id: 17, name: 'Dynama' }, 
    { id: 18, name: 'Dr IQ' }, 
    { id: 19, name: 'Magma' }, 
    { id: 20, name: 'Tornado' } 
]; 


@Component ({ 
    selector: 'my-app', 
    template: ` 
     <h1>{{title}}</h1> 

     <h2>My Heroes</h2> 
     <ul class="heroes"> 
      <li *ngFor="let hero of heroes"> 
       <span class="badge">{{hero.id}}</span> {{hero.name}} 
      </li> 
     </ul>   

     <h2>{{hero.name}} details!</h2> 
     <div><label>id: </label>{{hero.id}}</div> 
     <div> 
      <label>name: </label> 
      <input [(ngModel)]="hero.name" placeholder="name"> 
     </div> 
     ` 
}) 
export class AppComponent { 
    title = 'Tour or Heroes'; 
    heroes = HEROES; 
} 

Answer 2

私はすぐにこのエラーが@Component宣言エラーのいずれかの方法からスローすることができることに注意しましょう - すなわち、さえ@Component({}); - （セミコロンに注意してください）。

このエラーが表示された場合は、構文が正しいことを確認してください。

trueを2.0.0-rc.6とします。

Answer 3

私はそれに遭遇したとき、私はそれを長い間チェックします。最後に、@Component（{}）の最後にもう1つの ';'があります。不明なので

Answer 4

ルートフォルダから別のフォルダにコンポーネントを追加した後にこのエラーが発生しました。問題は./filenameをtemplateUrlとstyleUrlsへのパスに使用していたことです。削除後にエラーがなくなりました。

Answer 5

私の場合、私は以下のようなコンポーネントクラス定義の上にクラスを宣言しました。クラスMyClassの定義をエクスポートクラスの下に移動しています。 したがって、エクスポートクラスはコンポーネントファイルの最初の宣言でなければならないとします。

class MyClass { 

} 
export class MyComponent implements OnInit {