टाइपस्क्रिप्ट एंगुलर 2 घटक

Question

के साथ घोषणापत्र अपेक्षित त्रुटि घोषित करता है मैं टाइपस्क्रिप्ट का उपयोग करके एक कोणीय 2 ऐप का निर्माण करता हूं और मैं नई घटक कॉल sidekik.component.ts बनाने की कोशिश करता हूं और इस तरह app.component.ts पर आयात करता हूं।

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); 
    } 
} 

और फिर मैं चलाने NPM शुरू यह

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) 

कर सकते हैं

किसी को भी पता चलता इस के साथ मेरी मदद करो?

Answer 1

मैं, एक ही समस्या (Typescript Declaration expected ts संकलन पर उत्सर्जित) था, हालांकि यह भी एक अपवाद कोणीय द्वारा ब्राउज़र में फेंक दिया के रूप में सामने आया:

No Directive annotation found on [Errant Module]

यह मेरे लिए काम किया:

अपने @Component(); (sidekik.component.ts)

के अंत में अर्धविराम निकालें एक साधारण स्पष्टीकरण है कि सजावट Ors अभिव्यक्ति हैं जो एक फ़ंक्शन लौटाते हैं। यही है, एक सजावट कथन नहीं है। वक्तव्य कंपाइलर को चीजों को करने के लिए कहते हैं, और अर्ध-कॉलन (या नई लाइनों) को रोकने के लिए आवश्यक है। अभिव्यक्ति सिर्फ मूल्य वापस करें।

तो सजावटी को अर्धविरामों में समाप्त नहीं होना चाहिए, क्योंकि वे कथन नहीं हैं, और क्योंकि यदि वे कर सकते हैं, तो जेएस इंजन लिखने वाले लोगों के लिए जीवन कठिन हो जाएगा (यह अनुमान है)।

आप सजावट here के बारे में और जान सकते हैं।

Answer 2

समस्या अर्ध-कोलन साइडकिक कॉम्पोनेंट कक्षा से @ कॉम्पोनेंट() को अलग करने वाली अर्ध-कॉलन है। @ कॉम्पोनेंट उस वर्ग से जुड़ा एक एनोटेशन है जो इसका अनुसरण करता है। तो एक वर्ग को इसका पालन करना चाहिए। यदि आप अर्ध कोलन के साथ-साथ निर्यातित कक्षा को हटाते हैं ताकि @Component() फ़ाइल के निचले हिस्से में हो, तो आपको एक ही त्रुटि मिल जाएगी, क्योंकि @ कॉम्पोनेंट कक्षा की अपेक्षा करता है।

"@ कॉम्पोनेंट एक एनोटेशन है जो कोणीय को बताता है कि वर्ग, जो एनोटेशन से जुड़ा हुआ है, एक घटक है।" - http://blog.thoughtram.io/angular/2015/05/03/the-difference-between-annotations-and-decorators.html