wont work with webpack2

[digitalkaoz]

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

[andrey-skl]

@digitalkaoz So I investigated the issue and found that not a webpack 2 itself but es2015-webpack preset. It doesn't convert imports and exports from ES6 to commonJS so ng-annotate couldn't understand this.

So you could still be possible to use standart es2015 preset instead and get CommonJS as output of babel loader. I believe this is not a big deal to miss webpack's ES6 processing feature, isn't it?

[digitalkaoz]

mh, webpack2 has a native import feature. i tried to avoid the common-js-module plugin so webpack2 could optimize the code (see http://www.2ality.com/2015/12/webpack-tree-shaking.html) . would be great if your loader can support this...

maybe it must be a post-loader?

[andrey-skl]

@digitalkaoz I would like it to support this native import too but ng-annotate-loader is just wrapper for olov/ng-annotate module which does not support es6 features.

So the only way is to convert js to valid es5 before passing to ng-annotate. post-loader will not help here as I know because post- means only that loader will be applied after just loaders.

[iboozyvoozy]

some news about webpack@2 + es2015-webpack + ng-annotate ?

[andrey-skl]

Unfortunately no because ng-annotate module will support this only if somebody contribute this. There is nobody who'd make this done at the moment.

[gaui]

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

[crucialfelix]

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.

[colinskow]

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.

[nstuyvesant]

Been using ng-annotate-loader with Webpack 2.2.1 successfully with this as an element in my array for config.module.rules:

{
  test: /\.js$/,
  loader: 'ng-annotate-loader?single_quotes',
  enforce: 'post'
}

Also tried ng-annotate-webpack-plugin which works but is much slower (could be my configuration though).

[Verdier]

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}]
                    ]
                }
            }]
        }]
    },