A babel transformer plugin for Angular 2 annotations
JavaScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
test
.eslintignore
.eslintrc
.gitignore
.npmignore
.travis.yml
README.md
karma.conf.js
package.json

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