Angular2: Nie Dyrektywa adnotacja znaleźć na MyComponent

Question

Próbuję połączyć trochę angular2 aplikacji: nie używam maszynopis, ale raczej regularne ES6 z babel

moich plików wygląda następująco:

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

ten następnie zostanie skompilowany z użyciem WebPacka babel ładowarka z dwoma ustawieniami włączona ['es2015', 'stage-1']

gdy prowadził w przeglądarce to daje następujący błąd:

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

Próbowałem oczywiste dodanie adnotacji @Directive() do MyComponent, ale to nie miało wpływu.

Answer 1

Odpowiadając na moje własne pytanie:

po kawałku dochodzenia okazało się, że Babel emituje inny kod adnotacji/dekoratorów niż maszynopis robi, dlatego nie mogą być używane jak wyżej.

Zamiast tego, zamiast używać dekoratorów, możliwe jest, aby zadeklarować właściwości statyczne na klasie, która zwróci tablicę instancji dekorator:

class MyComponent { 

    ... 

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