Ng-annotate can't work with annotated ES6 classes methods when used with babel

[vlad-dragos]

Hello,

I'm trying to use this loader to annotate the output of Babel, however it doesn't seem to work.

This is my grunt config:

module: {
          loaders: [
            { test: /\.js$/,
              exclude: /(node_modules|bower_components)/,
              loaders: [
                'ng-annotate',
                'babel?optional[]=runtime&comments=true&compact=false',
              ],
}

This is the function:

export default class DataSourceServiceProvider {
  constructor(endpoint) {
    this._endpoint = endpoint;
  }

  /*@ngInject*/
  $get(Restangular) {
    return Restangular.all(self._endpoint);
  }
};

And the final result does not have any annotations.

AccountApp.provider('UserService', _data.UserServiceProvider);

var DataSourceServiceProvider = (function () {
      function DataSourceServiceProvider(endpoint) {
        _classCallCheck(this, DataSourceServiceProvider);

        this._endpoint = endpoint;
      }

      /*@ngInject*/

      _createClass(DataSourceServiceProvider, [{
        key: "$get",
        value: function $get(Restangular) {
          return Restangular.all(self._endpoint);
        }
      }]);

      return DataSourceServiceProvider;
    })();

Hope you can help :)

[andrey-skl]

@vlad-dragos hello. Actually it isn't about ng-annotate-loader, but about using ng-annotate with babel.

Ng-annotate-loader works, but ng-annotate can't work with annotated $get method as we see here. I don't know how to make it work for now, sorry.

[vlad-dragos]

But it annotates the the constructor() method?

[andrey-skl]

@vlad-dragos yes, because constructor is still a function after convertation. While methods converts into something strange if you see:

/*@ngInject*/

      _createClass(DataSourceServiceProvider, [{
        key: "$get",
//@ngInject comment should be here to make it work
        value: function $get(Restangular) {
          return Restangular.all(self._endpoint);
        }
      }]);

[vlad-dragos]

Did a bit of research and the following worked:

export default class DataSourceServiceProvider {
  constructor(endpoint) {
    this._endpoint = endpoint;
  }
  $get(Restangular) {
    "ngInject";
    return Restangular.all(this._endpoint);
  }
};

This marks the $get function for annotation.:

_createClass(DataSourceServiceProvider, [{
        key: "$get",
        value: ["Restangular", function $get(Restangular) {
          "ngInject";
          return Restangular.all(this._endpoint);
        }]
      }]);

Baybe you could add it to the docs or something :)

[andrey-skl]

@vlad-dragos actually this is added to docs of ng-annotate, also /* @ngInject */ comment should work. I cannot just place all that docs here, ng-annotate-loader is just a connector for webpack)