Negligible Participation Metric

    babel-plugin-angular2-annotations

    5.1.0 • Public • Published

    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.

    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 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

    Install

    npm i babel-plugin-angular2-annotations

    DownloadsWeekly Downloads

    1,120

    Version

    5.1.0

    License

    ISC

    Last publish

    Collaborators

    • avatar