Angular2: annotation contained in MyComponent is missing

Question

I'm trying to build a small angular2 application: I am not using TypeScript, but rather regular ES6 with babel

my files look like this:

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

this is then compiled using webpack using babel-loader with two presets enabled ['es2015', 'stage-1']

when launched in a browser, this causes the following error:

EXCEPTION : error creating Token Promise !.
ORIGINAL EXCLUSION : directive annotations not found on MyComponent

I tried explicitly adding @Directive() annotation to MyComponent, but this had no effect.

Answer 1

Answering my own question:

after a little research, I found that Babel emits different code for annotations / decorators than TypeScript, so it cannot be used as mentioned above.

Instead, instead of using decorators, you can declare a static property of the class that will return an array of Decorator instances:

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