2016-12-05 8 views
1

私はこのチュートリアルに従っています。 https://www.youtube.com/watch?v=_-CD_5YhJTACoursesComponentに指令がありません

しかし、私はこのエラーを取得しておいてください。

EXCEPTION: No Directive annotation found on CoursesComponent 

私app.components.tsこの

import {Component} from 'angular2/core'; 
import {CoursesComponent} from './courses.component'; 


@Component({ 
    selector: 'my-app', 
    template: '<h1>Hello Angular 2</h1><courses></courses>', 
    directives: [CoursesComponent] 
}) 



export class AppComponent { } 

私courses.components.tsのように見えますが、この

import {Component} from 'angular2/core'; 

@Component({ 
    selector:'courses'//css selector 
    template: '<h2>Courses</h2>' 
}) 


export class CoursesComponent{ } 
のように見えます

my package.json

{ 
    "name": "angular2-quickstart", 
    "version": "1.0.0", 
    "scripts": { 
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",  
    "tsc": "tsc", 
    "tsc:w": "tsc -w", 
    "lite": "lite-server", 
    "typings": "typings", 
    "postinstall": "typings install" 
    }, 
    "license": "ISC", 
    "dependencies": { 
    "angular2": "2.0.0-beta.7", 
    "systemjs": "0.19.22", 
    "es6-promise": "^3.0.2", 
    "es6-shim": "^0.33.3", 
    "reflect-metadata": "0.1.2", 
    "rxjs": "5.0.0-beta.2", 
    "zone.js": "0.5.15" 
    }, 
    "devDependencies": { 
    "concurrently": "^2.0.0", 
    "lite-server": "^2.1.0", 
    "typescript": "^1.7.5" 
    } 
} 

この問題を解決するにはどうすればよいですか?

+1

'component'は' directive'属性をサポートしていない属性や構造的なディレクティブを作成するためのディレクティブと@directive注釈の詳細については、角度のドキュメントを読むアプリ

全体づけしになります。あなたの 'angular2'バージョンは何ですか? rc.3または5のいずれかの 'directives'属性を削除しました。 – choz

+0

@choz、package.jsonのバージョン1.0.0を表示 – noor

+0

' package.json'を投稿できますか? – choz

答えて

0

あなたのcourses.components.tsに ";"このようなクラス宣言の後に

import {Component} from 'angular2/core'; 

@Component({ 
    selector:'courses'//css selector 
    template: '<h2>Courses</h2>' 
}) 


export class CoursesComponent{ }; 

あなたの問題を解決します。問題が再び来ればその実行NPMは、あなたのCMDにインストールした後、あなたの角度の2バージョンを確認

+2

ドキュメントにセミコロンを付けずにすべてのコンポーネントが終了しているのに、なぜこれが答えになると思いますか? https://angular.io/docs/ts/latest/quickstart.html – echonax

+0

次に、npm install -g angular-cli @ latestを使用してから、npm installを実行してみます。あなたの問題を解決することを願っています。 –

+0

@JitendraguptaここではなくOPの質問にコメントしたいと思います。 – choz

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

も参照してくださいhttps://angular.io/docs/ts/latest/guide/ngmodule.html

+1

OPは「angular2:2.0.0-beta.7」を使用しています:/ – echonax

+3

そう、彼は更新する必要があります;-) –

0

エラーがディレクティブ

Components-の3種類がある かなり明確ですテンプレート付きディレクティブ 構造指示 - DOM要素を追加および削除してDOMレイアウトを変更します。 属性ディレクティブ - 要素の外観や動作を変更します。

あなたは@Component注釈 でコンポーネントを書きました。しかし、あなただけのapp.module.tsでdelcarations配列で宣言コンポーネントを使用するためにはディレクティブ配列 でそれを宣言しています。コンポーネントは https://angular.io/docs/ts/latest/guide/attribute-directives.html

関連する問題