README

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

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

Class property decorators with initializers

@Component({ /* ... */ })
class HelloComponent {
  @Output() foo = new EventEmitter();`
}

With this plugin

Type annotations for constructor parameters
```
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

@Component({ /* ... */ })
class HelloComponent {
  @Input() bar;
}

Decorators for constructor parameters

@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

Usage no npm install needed!