Angular2:在MyComponent上找不到指令注释

Question

我正在尝试组合一个小角度应用程序:我不使用TypeScript,而是使用带有babel的常规ES6

我的文件看起来像这样:

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

然后使用带有两个预设的babel-loader使用webpack编译 ['es2015', 'stage-1']

在浏览器中运行时会产生以下错误:

EXCEPTION:令牌承诺实例化时出错!
原始例外:在MyComponent上找不到指令注释

我已经尝试过明显的向@Directive()MyComponent 添加注释,但这没有效果.

Answer 1

回答我自己的问题：

经过一番调查后，我发现 Babel 发出的注释/装饰器代码与 TypeScript 不同，因此不能像上面那样使用。

相反，可以在类上声明返回 Decorator 实例数组的静态属性，而不是使用装饰器：

class MyComponent {

  ...

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