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