A babel transformer plugin for Angular 2 annotations
A babel transformer plugin for Angular 2 decorators and type annotations.
Use babel-plugin-transform-decorators-legacy to support decorators.
Class decorators
@Component({ selector: 'hello' })
class HelloComponent {}
Class property decorators with initializers
@Component({ /* ... */ })
class HelloComponent {
@Output() foo = new EventEmitter();
}
Type annotations for constructor parameters
class Hello {
constructor(foo: Foo, bar: Bar) {
this.foo = foo;
this.bar = bar;
}
}
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;
}
}
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"
]
}
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.