Angular2: No Directive annotation found on MyComponent

Question

I'm trying to put together a little angular2 app: I'm not using TypeScript, but rather regular ES6 with babel

my files looks 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 then gets compiled with webpack using babel-loader with two presets enabled ['es2015', 'stage-1']

when ran in the browser this produces the following error:

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

I have tried the obvious adding @Directive() annotation to MyComponent, but that had no effect.

Answer 1

Answering my own question:

after a bit of investigation I found out that Babel emits different code for annotations/decorators than TypeScript does, therefore it cannot be used as above.

Instead, rather than using decorators, it is possible to declare static property on the class that would return 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>'
      })
    ];
  }
}