Rumes Shyaman Rumes Shyaman - 2 months ago 17
TypeScript Question

Typescript throws Declaration Expected error with Angular 2 component

I building a angular 2 app using typescript and I try to create new component call sidekik.component.ts and import to app.component.ts like this.

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


and then i run the npm start it shows

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)


can anyone help me with this?.

Answer

I had the same problem (Typescript Declaration expected emitted on ts compilation), although it also surfaced as an exception thrown in the browser by Angular:

No Directive annotation found on [Errant Module]

This worked for me:

Remove the semicolon at the end of your @Component(); (sidekik.component.ts)

A simple explanation is that decorators are expressions that return a function. That is, a decorator is not a statement. Statements tell the compiler to do things, and need semi-colons (or new lines) to be stopped. Expressions just return values.

So decorators must not end in semicolons, because they are not statements, and because if they could, that would make life harder for people who write JS engines (that's a guess).

You can learn more about decorators here.