Typescript wirft Erklärung Erwarteter Fehler mit Angular 2 Komponente

Question

Ich baue eine angular 2 App mit typescript und ich versuche, neue Komponente Aufruf sidekik.component.ts zu erstellen und zu app.component.ts wie folgt importieren.

app.component.ts

import {Component} from 'angular2/core'; 
import {SideKikComponent} from './classes/sidekik.component'; 

interface Hero { 
    id: number; 
    name: string; 
} 

@Component({ 
    selector: 'my-app', 
    directives:[ 
    SideKikComponent, 
    ], 
    templateUrl:'app/views/heros.html', 
    styleUrls: ['app/css/site.css'] 
}) 

export class AppComponent { 
    public title = 'Tour of Heroes'; 
    public heroes =HEROS; 
    public selectedHero: Hero; 

    onSelect(hero: Hero) { 
    this.selectedHero = hero; 
    } 
} 

var HEROS: Hero[] =[ 
    {"id":1,"name":"SuperMan"}, 
    {"id":2,"name":"Captain America"}, 
    {"id":3,"name":"Thor"}, 
    {"id":4,"name":"Iorn Man"}, 
    {"id":5,"name":"Ant Man"} 
]; 

sidekik.component.ts

import {Component, View} from 'angular2/core'; 

@Component({ 
    selector:'sidekik', 
    events:['hit'], 
    properties:['define'], 
    template: ` 
    <sidekik (click) = "hit(define)"></sidekik> 
`, 

}); 

export class SideKikComponent{ 
    hit(define:string){ 
    console.log(define); 
    } 
} 

und ich laufe dann die npm beginnen, es zeigt

rumes@rumes-HP-ProBook-4530s:/var/www/html/angular2ts$ tsc --version 
message TS6029: Version 1.7.5 
rumes@rumes-HP-ProBook-4530s:/var/www/html/angular2ts$ npm start 

> angular2ts@1.0.0 start /var/www/html/angular2ts 
> concurrent "npm run tsc:w" "npm run lite" 

[0] 
[0] > angular2ts@1.0.0 tsc:w /var/www/html/angular2ts 
[0] > tsc -w 
[0] 
[1] 
[1] > angular2ts@1.0.0 lite /var/www/html/angular2ts 
[1] > lite-server 
[1] 
[1] [BS] Access URLs: 
[1] ------------------------------------ 
[1]  Local: http://localhost:3000 
[1]  External: http://192.168.1.7:3000 
[1] ------------------------------------ 
[1]   UI: http://localhost:3001 
[1] UI External: http://192.168.1.7:3001 
[1] ------------------------------------ 
[1] [BS] Serving files from: ./ 
[1] [BS] Watching files... 
[0] app/classes/sidekik.component.ts(11,3): error TS1146: Declaration expected. 
[1] 15.12.17 16:04:28 304 GET /./index.html (Unknown - 29ms) 
[0] 4:04:28 PM - Compilation complete. Watching for file changes. 
[1] 15.12.17 16:04:28 304 GET /node_modules/angular2/bundles/angular2-polyfills.js (Unknown - 310ms) 
[1] 15.12.17 16:04:28 304 GET /node_modules/systemjs/dist/system.src.js (Unknown - 310ms) 
[1] 15.12.17 16:04:28 304 GET /node_modules/rxjs/bundles/Rx.js (Unknown - 310ms) 
[1] 15.12.17 16:04:28 304 GET /node_modules/angular2/bundles/angular2.dev.js (Unknown - 310ms) 
[1] [BS] File changed: app/classes/sidekik.component.js 
[1] [BS] File changed: app/app.component.js 
[1] [BS] File changed: app/boot.js 
[1] 15.12.17 16:04:29 200 GET /app/boot.js (Unknown - 40ms) 
[1] 15.12.17 16:04:30 200 GET /app/app.component.js (Unknown - 92ms) 
[1] 15.12.17 16:04:30 200 GET /app/classes/sidekik.component.js (Unknown - 75ms) 
[1] 15.12.17 16:04:31 304 GET /app/views/heros.html (Unknown - 227ms) 
[1] 15.12.17 16:04:31 404 GET /favicon.ico (Unknown - 229ms) 

kann jedermann Hilf mir dabei?

Answer 1

hatte ich das gleiche Problem (Typescript Declaration expected auf Ts Kompilation emittiert), obwohl sie auch als Ausnahme im Browser durch Schräg geworfen aufgetaucht:

No Directive annotation found on [Errant Module]

Das ist für mich gearbeitet:

Entfernen Sie das Semikolon am Ende Ihrer @Component(); (sidekik.component.ts)

Eine einfache Erklärung ist, dass decorat Oder sind Ausdrücke, die eine Funktion zurückgeben. Das heißt, ein Dekorator ist keine Anweisung. Anweisungen sagen dem Compiler, Dinge zu tun, und Semikolons (oder neue Zeilen) müssen gestoppt werden. Ausdrücke geben nur Werte zurück.

Also Dekoratoren dürfen nicht in Semikolons enden, weil sie keine Anweisungen sind, und weil, wenn sie könnten, würde das Leben härter für Leute machen, die JS-Engines schreiben (das ist eine Vermutung).

Sie können mehr über Dekoratoren here erfahren.

Answer 2

Das Problem ist das Semikolon, das die @Component() von SideKikComponent-Klasse trennt. @Component ist eine Annotation, die an die nachfolgende Klasse angehängt ist. Also muss eine Klasse folgen. Wenn Sie sowohl den Semikolon als auch die exportierte Klasse entfernen, sodass sich @Component() am Ende der Datei befindet, erhalten Sie genau den gleichen Fehler, da @Component eine Klasse erwartet.

"@Component ist eine Annotation, die Angular mitteilt, dass die Klasse, an die die Annotation angehängt ist, eine Komponente ist." - http://blog.thoughtram.io/angular/2015/05/03/the-difference-between-annotations-and-decorators.html