Angular2: Nessun annotazioni direttiva trovato su MyComponent

Question

Sto cercando di mettere insieme una piccola applicazione angular2: non sto usando tipografico, ma piuttosto regolare ES6 con Babel

miei file è simile al seguente:

//mycomponent.js 
import { Component, View } from 'angular2/angular2'; 

@Component({ 
    selector: 'my-app' 
}) 
@View({ 
    template: '<h1>My First Angular 2 App</h1>' 
}) 
class MyComponent { 
    constructor() { 
    } 
    get prop() { 
    return 'hello'; 
    } 
} 

export { MyComponent }; 


// index.js 
import 'zone.js'; 
import 'reflect-metadata'; 

import { MyComponent } from './mycomponent'; 
import { bootstrap } from 'angular2/angular2'; 

bootstrap(MyComponent); 

questo poi viene compilato con webpack utilizzando babel-caricatore con due preset abilitato ['es2015', 'stage-1']

quando correva nel browser questo produce il seguente errore:

EXCEPTION: Error during instantiation of Token Promise!.
ORIGINAL EXCEPTION: No Directive annotation found on MyComponent

Ho provato l'ovvia aggiunta di annotazione @Directive() a MyComponent, ma ciò non ha avuto alcun effetto.

Answer 1

Rispondendo alla mia domanda:

dopo un po 'di indagini ho scoperto che Babel emette codice diverso per le annotazioni/decoratori di Carattere tipografico fa, quindi non può essere utilizzato come sopra.

Invece, piuttosto che utilizzare decoratori, è possibile dichiarare proprietà statica della classe che sarebbe tornato array di istanze del decoratore:

class MyComponent { 

    ... 

    static get annotations() { 
    return [ 
     new Component({ 
     selector: 'my-app' 
     }), 
     new View({ 
     template: '<span>My First Angular 2 App</span>' 
     }) 
    ]; 
    } 
}