A babel transformer plugin for Angular 2 annotations
JavaScript

README.md

build status npm version npm downloads

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' })
    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