ng-annotate-loader

0.7.0 verified Sat Apr 25 auth: no javascript

A webpack loader that automatically adds AngularJS dependency injection annotations to your source code using ng-annotate. Version 0.7.0 is the latest stable release. It generates source maps by default and supports chaining with other loaders like babel-loader. Key features include passing ng-annotate options (add, map, etc.), using ng-annotate plugins, and specifying a custom ng-annotate fork. This loader is specific to AngularJS (1.x) and webpack 1.x/2.x/3.x; for newer Angular versions, consider using the Angular CLI or other DI mechanisms.

Common errors

error Module not found: Error: Cannot resolve module 'ng-annotate-loader' ↓

cause ng-annotate-loader is not installed or the path is incorrect.

fix

Run 'npm install --save-dev ng-annotate-loader' and ensure it's in your package.json.

error ERROR in ng-annotate-loader: Could not find ng-annotate module ↓

cause The loader cannot resolve the 'ng-annotate' dependency.

fix

Make sure 'ng-annotate' is installed: 'npm install --save-dev ng-annotate'.

error Source map issue: source-map library version mismatch ↓

cause Incompatible version of source-map maybe installed.

fix

Install a compatible version: 'npm install source-map@0.5.6'.

Warnings

deprecated ng-annotate itself is no longer actively maintained. For AngularJS (1.x), consider using babel-plugin-angularjs-annotate instead. ↓

fix Replace with babel-plugin-angularjs-annotate in your babel configuration.

breaking Webpack 4+ changed the loader invocation method. This loader may not work with webpack 4 without configuration. ↓

fix Use webpack 3 or earlier, or check for a maintained fork.

gotcha Chaining loaders: ng-annotate-loader must run before other transpilers (e.g., babel) to avoid syntax errors from ng-annotate injecting code that isn't transpiled. ↓

fix Ensure ng-annotate-loader appears before babel-loader in the rules array.

Install

npm install ng-annotate-loader

yarn add ng-annotate-loader

pnpm add ng-annotate-loader

Imports

default

wrong

const ngAnnotateLoader = require('ng-annotate-loader')

correct

import ngAnnotateLoader from 'ng-annotate-loader'

This loader is typically used via webpack config, not imported directly.

Quickstart

Configures webpack to run ng-annotate-loader before babel-loader on JavaScript files, enabling automatic AngularJS DI annotation.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'ng-annotate-loader',
            options: {
              add: true,
              map: false
            }
          },
          'babel-loader'
        ]
      }
    ]
  }
};