babel-plugin-angular2-annotations
v5.1.0
Published
An experimental babel transformer plugin for Angular 2 annotations
Downloads
1,560
Maintainers
Readme
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.
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 asQueryList
- Generic types are ignored as same as in TypeScript e.g.
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.