Ecmascript 6 Angular2:在MyComponent上未找到指令批注

我正在尝试组合一个小angular2应用程序： 我不是在使用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);

//mycomponent.js
从'angular2/angular2'导入{组件，视图}；
@组成部分({
选择器：“我的应用程序”
})
@看法({
模板：“我的第一个Angular 2应用程序”
})
类MyComponent{
构造函数（）{
}
获取道具（）{
返回“你好”；
}
}
导出{MyComponent}；
//index.js
导入'zone.js'；
导入“反映元数据”；
从“/MyComponent”导入{MyComponent}；
从'angular2/angular2'导入{bootstrap}；
bootstrap（MyComponent）；

然后使用启用了两个预设的babel loader使用webpack编译此文件

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

异常：令牌承诺实例化期间出错
原始异常：在MyComponent上未找到指令注释

---

我尝试过向MyComponent添加明显的

@Directive（）

注释，但没有效果。

回答我自己的问题：

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

相反，与其使用Decorator，不如在将返回Decorator实例数组的类上声明静态属性：

class MyComponent {

  ...

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

类MyComponent{
...
静态获取注释（）{
返回[
新组件({
选择器：“我的应用程序”
}),
新观点({
模板：“我的第一个Angular 2应用程序”
})
];
}
} 

@指令

是一种注释和纯打字脚本。没有JavaScript等价物。ES7（！）中的装饰师有些不同。因此，当您使用

@Component

时，您使用的是TypeScript。我很确定，它在ES7装饰程序中也是可行的。检查我有同样的问题，我清除了浏览器的缓存，错误消失了。也许有人觉得这很有帮助