change - page title angular 4

Expedientes de mecanografía Declaración Error esperado con componente angular 2

Question

Estoy construyendo una aplicación angular 2 usando un mecanografiado y trato de crear un nuevo componente llamado sidekik.component.ts e importarlo a app.component.ts de esta manera.

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

y luego ejecuto el inicio npm muestra

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)

¿Puede alguien ayudarme con esto?.

Answer 1

Tuve el mismo problema (la Typescript Declaration expected emitió en la compilación de ts), aunque también surgió como una excepción lanzada en el navegador por Angular:

No Directive annotation found on [Errant Module]

Esto funcionó para mí:

Elimine el punto y coma al final de su @Component(); (sidekik.component.ts)

Una explicación simple es que los decoradores son expresiones que devuelven una función. Es decir, un decorador no es una declaración . Las declaraciones le dicen al compilador que haga cosas, y necesita puntos y comas (o líneas nuevas) para detener. Las expresiones solo devuelven valores.

Así que los decoradores no deben terminar en punto y coma, porque no son enunciados, y porque si pudieran, eso haría la vida más difícil para las personas que escriben los motores JS (eso es una suposición).

Puede obtener más información sobre decoradores aquí .

Answer 2

El problema es el punto y coma que separa el @Component () de la clase SideKikComponent. @Component es una anotación adjunta a la clase que lo sigue. Entonces una clase debe seguirlo. Si elimina el punto y coma y la clase exportada para que @Component () se encuentre en la parte inferior del archivo, obtendrá exactamente el mismo error, porque @Component espera una clase.

"@Component es una anotación que le dice a Angular que la clase a la que está asociada la anotación es un componente". - http://blog.thoughtram.io/angular/2015/05/03/the-difference-between-annotations-and-decorators.html