ng-annotate-loader: wont work with webpack2

it seems this loader wont work with webpack2:

//webpack.config.js
        loaders: [{
            test: /\.js$/,
            loaders: ['ng-annotate', 'babel'],
            exclude: /node_modules/
        }]

using https://github.com/gajus/babel-preset-es2015-webpack (to enable tree-shaking)

//babel.rc
{
  "presets": ["es2015-webpack"],
  "plugins": [
    "transform-class-properties"
  ]
}

{
  "devDependencies": {
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "babel-plugin-transform-class-properties": "^6.4.0",
    "ng-annotate-loader": "^0.1.0",
    "webpack": "^2.0-beta",
    "webpack-dev-server": "^2.0-beta"
  }
}
//package.json

none of my angular files gets injections anymore…any hint?

btw im using the "ngInject" syntax

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 16 (8 by maintainers)

Commits related to this issue

#17 Update webpack to 2 beta in examples — committed to andrey-skl/ng-annotate-loader by andrey-skl 8 years ago
#17 reproducing environment — committed to andrey-skl/ng-annotate-loader by andrey-skl 8 years ago
allowing import and export, fixing issue with Webpack — committed to 0cv/ng-annotate by 0cv 8 years ago
Add an option to use a fork of ng-annotate ng-annotate is no longer maintained[1], and hence fails when applied to source code containing modern JavaScript constructs, like import and export. In part... — committed to bluetech/ng-annotate-loader by bluetech 7 years ago

Most upvoted comments

I switched to “babel-plugin-angularjs-annotate” and I now have annotation working in webpack 2 with tree shaking.

This means using babel to do the annotation transform, not using any webpack loaders or plugins.

crucialfelix on Jan 10, 2017

I didn’t get it to work with Webpack 2 so I tried ng-annotate-webpack-plugin and it worked.

gaui on Jan 5, 2017

babel-plugin-angularjs-annotate is the updated version of ng-annotate. it works by adding the plugin to babelrc file. very convenient and easy to use

irshsheik on Dec 14, 2017

babel-plugin-angularjs-annotate caused runtime errors in my app.

ng-annotate-webpack-plugin works perfectly with Webpack 2 tree shaking. This needs to be a plugin rather than a loader.

colinskow on Feb 13, 2017

OK, since version 0.6.0 of the loader it is now possible to specify a fork of ng-annotate. I had made such a fork which fixes the issues I had encountered around import/export. The fork is here: https://github.com/bluetech/ng-annotate-patched see the README for the changes.

If you want to use that, install the fork:

npm install --save-dev ng-annotate-patched

And tell the loader to use it:

{
    loader: 'ng-annotate-loader',
    options: {
        ngAnnotate: 'ng-annotate-patched',
    },
}

That should be it.

bluetech on Apr 29, 2017

You have to suffix by -loader => ng-annotate-loader and babel-loader.

    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: [{
                loader: 'ng-annotate-loader'
            }, {
                loader: 'babel-loader',
                options: {
                    presets: [
                        ["es2015", {"loose": true}]
                    ]
                }
            }]
        }]
    },

Verdier on Mar 27, 2017