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