2016-12-05 1 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

코스 닷컴에서 ";" 이

import {Component} from 'angular2/core'; 

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


export class CoursesComponent{ }; 

같은 클래스 선언 후 당신의 문제를 해결하기를 바랍니다. 문제가 다시 그 실행 NPM 후 각 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

를 참조하여 cmd를 설치 지침 3 종류가있다

성분 - 템플릿을 사용한 지시문. 구조 지시문 - DOM 요소를 추가하고 제거하여 DOM 레이아웃을 변경합니다. 속성 지시문 - 요소의 모양 또는 동작을 변경합니다.

당신은 @Component 주석 와 구성 요소를 썼다 그러나 당신은 app.module.ts에서 delcarations 배열을 선언 구성 요소를 사용하기 위해서는 지시 배열 에 선언되어있다. 구성 요소는 https://angular.io/docs/ts/latest/guide/attribute-directives.html