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上找不到指令注释

我已尝试向MyComponent添加明显的@Directive()注释，但这没有效果。

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>'
      })
    ];
  }
}

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

1 个答案: