A babel transformer plugin for Angular 2 decorators and type annotations.

Use babel-plugin-transform-decorators-legacy to support decorators.

• Class decorators

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

• Class property decorators with initializers

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

• 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; } }

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" ] }

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.

ISC