Typescript throws Declaration Expected error with Angular 2 component

Question

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

> [email protected] start /var/www/html/angular2ts
> concurrent "npm run tsc:w" "npm run lite" 

[0] 
[0] > [email protected] tsc:w /var/www/html/angular2ts
[0] > tsc -w
[0] 
[1] 
[1] > [email protected] 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 1

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.

Answer 2

The problem is the semi-colon separating the @Component() from SideKikComponent class. @Component is an annotation attached to the class that follows it. So a class must follow it. If you remove the semi colon as well as the exported class so that @Component() is at the bottom of the file, you will get the exact same error, because @Component expects a class.

"@Component is an annotation that tells Angular, that the class, which the annotation is attached to, is a component." -http://blog.thoughtram.io/angular/2015/05/03/the-difference-between-annotations-and-decorators.html