Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

A babel transformer plugin for Angular 2 annotations

Resources

You can’t perform that action at this time.