Angular ng annotate does not work with babel

Question

I am using browserify and babel to compile my js files and i want the ng annotate plugin too but it is not working, any ideas why?

The gulp task:

  browserify(config.js.src, { debug: true })
    .transform(babel.configure({ ignore: /vendor\// }))
    .bundle()
    .pipe(source(config.js.mainFileName))
    .pipe(buffer())
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(ngAnnotate())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(config.js.dist));

class HomeController {
  // @ngInject
  constructor($http) {
    this.name = 'avi';
  }
}

export default HomeController;

Why wouldn't you just have ng-annotate run before the browserify transform? — cdhowie, Sep 25 '16 at 21:45

score 3 · Answer 1 · answered Jun 03 '15 at 14:08

3

I think in your case Babel is stripping comments. Ng-annotate works with compiled es5 code and have to somehow know what to annotate. You can either run babel with comments: true and compact: false to preserve comments or use string literals:

constructor($http) {
    "ngInject";
    this.name = 'avi';
}

answered Jun 03 '15 at 14:08

Ivan Buryak

633
5
13

`comments: true` is actually default. What I discovered in my particular case is that I was converting ES6 modules to commonjs with babel, and babel was inserting a few statements between my comment and the outputted `function YourClass`, which was frustrating ng-annotate. My solution also ended up placing `"ngInject"` literals at the top of the function. – Avi Cherry Oct 08 '15 at 20:29

Angular ng annotate does not work with babel

1 Answers1

Linked