An experimental babel transformer plugin for Angular 2 annotations
npm install 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.
- Class decorators
``js`
@Component({ selector: 'hello' })
class HelloComponent {}
- Class property decorators with initializers
`js
@Component({ / ... / })
class HelloComponent {
@Output() foo = new EventEmitter();
}
``
- Type annotations for constructor parameters
`js`
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 is treated as QueryList
- Class property decorators with no initializer
`js`
@Component({ / ... / })
class HelloComponent {
@Input() bar;
}
- Decorators for constructor parameters
`js`
@Component({ / ... / })
class HelloComponent {
constructor(@Attribute('name') name, @Optional() optional) {
this.name = name;
this.optional = optional;
}
}
`sh`
npm install --save-dev babel-plugin-angular2-annotations
`sh`
npm install --save-dev babel-plugin-transform-decorators-legacy babel-plugin-transform-class-properties babel-plugin-transform-flow-strip-types babel-preset-es2015
.babelrc
`json`
{
"plugins": [
"angular2-annotations",
"transform-decorators-legacy",
"transform-class-properties",
"transform-flow-strip-types"
],
"presets": [
"es2015"
]
}
Before:
`js`
class HelloComponent {
@Input() baz;
constructor(foo: Foo, @Optional() bar: Bar) {
}
}
After:
`js
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.