babel-plugin-angularjs-annotate

0.10.0 verified Sat Apr 25 auth: no javascript maintenance

A Babel plugin that adds Angular 1.x dependency injection annotations to ES5/ES6 code, supporting both explicit (`/* @ngInject */`) and automatic (implicit) annotation of common Angular patterns. Version 0.10.0 is the latest stable release; the plugin is in maintenance mode with infrequent updates. It is a fork of ng-annotate optimized for Babel users, offering reduced build times by avoiding a separate tool. It fully supports ES5, transpiled ES6, and raw ES6, including ES6 classes and arrow functions not covered by ng-annotate. Key differentiators: integration with Babel pipeline, ES6+ support, and `explicitOnly` option to restrict annotation to marked functions only.

Common errors

error Error: Cannot find module 'babel-plugin-angularjs-annotate' ↓

cause Plugin not installed or not in node_modules.

fix

Run npm install --save-dev babel-plugin-angularjs-annotate and ensure it's in devDependencies.

error ReferenceError: angular is not defined ↓

cause AngularJS library not included in the build or global scope.

fix

Add AngularJS (e.g., npm install angular) and include it via script tag or bundler entry.

error TypeError: Cannot read property 'push' of undefined (at addInjectCode) ↓

cause Plugin used with unsupported Babel version or incorrect config.

fix

Ensure Babel 6+ is installed; check that the plugin is in the 'plugins' array (not 'presets').

Warnings

gotcha Arrow functions in Angular service/provider declarations lose `this` context. The plugin will still add annotations, but the app won't work. ↓

fix Use regular functions for services and providers: angular.module('app').service('MySvc', function($http) { ... });

deprecated The plugin uses `@ngInject` comments; the 'ngInject' string directive is deprecated in favor of `/* @ngInject */`. ↓

fix Replace 'ngInject' string with `/* @ngInject */` comment annotation.

gotcha If using `explicitOnly: true`, the plugin will not annotate implicit patterns. Unexpected missing annotations may occur if developers forget `@ngInject`. ↓

fix Ensure all functions needing DI have explicit `/* @ngInject */` comment or set `explicitOnly: false`.

gotcha Class property annotations (e.g., static $inject) are not added; the plugin only adds `$inject` after the class declaration. ↓

fix Manually add static $inject property if you prefer property-style annotation, or rely on plugin's output.

Install

npm install babel-plugin-angularjs-annotate

yarn add babel-plugin-angularjs-annotate

pnpm add babel-plugin-angularjs-annotate

Imports

default
wrong
```
const plugin = require('babel-plugin-angularjs-annotate');
```
correct
```
import plugin from 'babel-plugin-angularjs-annotate'
```
ESM default import works in modern setups; CJS require also works but may cause issues with some bundlers.

plugin

wrong

module.exports = { plugins: ['babel-plugin-angularjs-annotate'] };

correct

module.exports = { plugins: ['angularjs-annotate'] };

In Babel config, use the short name 'angularjs-annotate' (without the 'babel-plugin-' prefix).

options

wrong

module.exports = { plugins: [['angularjs-annotate', { explicitOnly: 'true' }]] };

correct

module.exports = { plugins: [['angularjs-annotate', { explicitOnly: true }]] };

Options are passed as array of [name, options]; explicitOnly expects boolean, not string.

Quickstart

Install the plugin, configure it in Babel, and see implicit class annotation output.

# Install plugin
npm install --save-dev babel-plugin-angularjs-annotate

# .babelrc or babel.config.js configuration
{
  "presets": ["@babel/preset-env"],
  "plugins": ["angularjs-annotate"]
}

# Example input (app.js):
class MyService {
  constructor($http, $q) {
    this.$http = $http;
    this.$q = $q;
  }
}
angular.module('app').service('MyService', MyService);

# Output after Babel transformation:
class MyService {
  constructor($http, $q) {
    this.$http = $http;
    this.$q = $q;
  }
}
MyService.$inject = ['$http', '$q'];
angular.module('app').service('MyService', MyService);