ng-annotate-loader icon indicating copy to clipboard operation
ng-annotate-loader copied to clipboard

// @ngInject does not work if first line in file

Open filipesilva opened this issue 8 years ago • 4 comments

Using this loader

  module: {
    loaders: [{
      test: /\.js$/,
      include: path.resolve(__dirname, 'app/'),
      loaders: ['ng-annotate', 'babel-loader']
    }, 
    (...)

If my file contains, for example

// @ngInject
function controller($stateParams, session, tiles, organizations) {
  let vm = this;
}

It gets compiled to

// @ngInject
'use strict';

Object.defineProperty(exports, '__esModule', {
  value: true
});

function controller($stateParams, session, tiles, organizations) {
  var vm = this;
}
exports["default"] = controller;
module.exports = exports["default"];

Causing the annotation to not work. In contrast, with if the comment is not the first line

let number = 1;

// @ngInject
function controller($stateParams, session, tiles, organizations) {
  let vm = this;
}

export default controller;

It compiles well

    "use strict";

    Object.defineProperty(exports, "__esModule", {
      value: true
    });
    var number = 1;

    // @ngInject
    function controller($stateParams, session, tiles, organizations) {
      var vm = this;
    }
    controller.$inject = ["$stateParams", "session", "tiles", "organizations"];

    exports["default"] = controller;
    module.exports = exports["default"];

I tried using the "ngInject" syntax and it works. Any suggestion to get the // @ngInject syntax to work as well in this case?

filipesilva avatar Sep 20 '15 15:09 filipesilva

@filipesilva Hello! The reason is that Babel adds "use strict"; line in each file by default and you got this:

    // @ngInject
    "use strict";

    function controller($stateParams, session, tiles, organizations) {
      var vm = this;
    }

Sorry but I haven't workaround for this. Also I have never seen such problem with my code because my files always has imports in top. You can vote up the original issue in Babel: https://github.com/babel/babel/issues/2391

andrey-skl avatar Sep 21 '15 08:09 andrey-skl

I figured as much. Ah well, "ngInject" it is for now.

filipesilva avatar Sep 21 '15 08:09 filipesilva

For those of you having some trouble getting the comment to work, try /** @ngInject */. Most minifiers will ignore comments starting with two *'s .

orrybaram avatar Jan 11 '16 23:01 orrybaram

Also I find that babel may drop comments, but you can set option comments: true and it will works

andrey-skl avatar Jan 12 '16 08:01 andrey-skl