babel-plugin-angular2-annotations

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

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

Supported decorators/annotations

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

• Class decorators

  @Component({selector: 'hello'})classHelloComponent{}

• Class property decorators with initializers

  @Component({/* ... */})classHelloComponent{
  @Output()foo=newEventEmitter();}

With this plugin

• Type annotations for constructor parameters

  classHello{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({/* ... */})classHelloComponent{
  @Input()bar;}

• Decorators for constructor parameters

  @Component({/* ... */})classHelloComponent{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:

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

After:

classHelloComponent{
@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