A babel transformer plugin for Angular 2 annotations.

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

Make sure to load reflect-metadata for browser in order to polyfill Metadata Reflection API in your app.

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

npm install --save-dev babel-plugin-transform-decorators-legacy babel-plugin-transform-flow-strip-types

.babelrc

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

That's it.

To monkey-patch babylon, the parser of babel, should be installed at the top level. This is an ugly hack but inevitable to support parameter decorators, which is not currently supported by babel, by monkey-patching.

npm install --save-dev babylon

• Class decorators (@Component()): works without this plugin
• Type annotations for constructor parameters (constructor(foo: Foo, bar: Bar) {})
• Decorators for constructor parameters (constructor(@Attriute('name') name, @Parent() parent) {})

Before:

class HelloComponent {
  constructor(@Something({ hello: 'world' }) foo: Foo, bar: Bar) {
  }
}

After:

class HelloComponent {
}

Something({ hello: 'world' })(HelloComponent, null, 0);
Reflect.defineMetadata('design:paramtypes', [Foo, Bar]);

See babel-angular2-app for more complete example.