babel-plugin-angular2-annotations

5.1.0 verified Sat Apr 25 auth: no javascript abandoned

An experimental Babel transformer plugin for Angular 2 decorators and type annotations. Version 5.1.0 (last released in 2016) is the latest stable version, but the project is effectively abandoned with no updates since. It requires babel-plugin-transform-decorators-legacy for decorator support and transforms Flow-style type annotations into Angular's design:paramtypes metadata for dependency injection. Unlike the official Angular compiler, this plugin allowed using Angular 2 with Babel/Flow instead of TypeScript. However, it only supports Angular 2.x and has known issues with newer Angular versions and strict mode.

Common errors

error Error: Cannot find module 'babel-plugin-angular2-annotations' ↓

cause Plugin not installed or not listed in node_modules

fix

Run npm install --save-dev babel-plugin-angular2-annotations

error SyntaxError: Unexpected token @ ↓

cause Decorator syntax not supported by Babel without transform-decorators-legacy plugin

fix

Add 'transform-decorators-legacy' to plugins list in .babelrc

error Error: Reflect is not defined ↓

cause reflect-metadata polyfill missing

fix

Install reflect-metadata (npm install reflect-metadata) and import it at the entry point

error TypeError: Cannot read property 'annotations' of undefined ↓

cause angular2-annotations plugin may be configured incorrectly or missing in .babelrc

fix

Ensure 'angular2-annotations' is in plugins list and appears before transform-decorators-legacy

Warnings

breaking Plugin does not compile with strict mode

gotcha Requires reflect-metadata polyfill ↓

fix npm install reflect-metadata and import it in your app

deprecated Project is abandoned and unmaintained; may not work with Babel 7+ or Angular 4+ ↓

fix Migrate to Angular's official compiler or ngc

gotcha Decorator ordering matters: angular2-annotations must come before transform-decorators-legacy in plugins list ↓

fix List 'angular2-annotations' before 'transform-decorators-legacy' in .babelrc

gotcha Class property decorators without initializer are handled but produce degraded output on class prototype ↓

fix Provide an initializer (even undefined) for class properties

Install

npm install babel-plugin-angular2-annotations

yarn add babel-plugin-angular2-annotations

pnpm add babel-plugin-angular2-annotations

Imports

babel-plugin-angular2-annotations
```
install and configure in .babelrc
```
This is a Babel plugin, not an imported module. Configure it in .babelrc or babel.config.js as 'angular2-annotations'.

Quickstart

Installs the plugin and other required Babel plugins, then configures them in .babelrc to transpile Angular 2 decorators and type annotations.

npm install --save-dev babel-plugin-angular2-annotations 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"
  ]
}