babel-plugin-angular2-annotations

A babel transformer plugin for Angular 2 decorators and type annotations.
Use babel-plugin-transform-decorators-legacy to support decorators.
Make sure to load reflect-metadata for browser in order to polyfill Metadata Reflection API in your app.

Supported decorators/annotations

Even without this plugin (thanks to babel-plugin-transform-decorators-legacy)

• Class decorators

```js @Component({ selector: 'hello' }) class HelloComponent {} ```

• Class property decorators with initializers

```js @Component({ / ... / }) class HelloComponent {

@Output() foo = new EventEmitter();`

} ```

With this plugin

• Type annotations for constructor parameters

```js class Hello {

constructor(foo: Foo, bar: Bar) {
  this.foo = foo;
  this.bar = bar;
}

} ```
- Generic types are ignored as same as in TypeScript e.g. QueryList<RouterLink> is treated as QueryList

• Class property decorators with no initializer

```js @Component({ / ... / }) class HelloComponent {

@Input() bar;

} ```

• Decorators for constructor parameters

```js @Component({ / ... / }) class HelloComponent {

constructor(@Attribute('name') name, @Optional() optional) {
  this.name = name;
  this.optional = optional;
}

} ```

Install

npm install --save-dev babel-plugin-angular2-annotations

npm install --save-dev babel-plugin-transform-decorators-legacy babel-plugin-transform-class-properties babel-plugin-transform-flow-strip-types babel-preset-es2015

.babelrc

{
  "plugins": [
    "angular2-annotations",
    "transform-decorators-legacy",
    "transform-class-properties",
    "transform-flow-strip-types"
  ],
  "presets": [
    "es2015"
  ]
}

Example

Before:

class HelloComponent {
  @Input() baz;
  constructor(foo: Foo, @Optional() bar: Bar) {
  }
}

After:

class HelloComponent {
  @Input() baz = this.baz;
}

Optional()(HelloComponent, null, 1);
Reflect.defineMetadata('design:paramtypes', [Foo, Bar]);

See babel-angular2-app or angular2-esnext-starter for more complete example.

License

ISC