using gulp-ng-annotate with gulp-systemjs-builder

Question

I have written my angularjs application in CJS format and using gulp-systemjs-builder to bundle them to one file.

I am trying to pipe the output to gulp-ng-annotate for DI but it fails because systemjs-builder inserts couple of line between the \* @ngInject *\ and function declaration.

Example:

Before Bundle:

/* @ngInject */ 
function ReportCtrl($scope) {
    var _ctrl = this;
}

After Bundle:

/* @ngInject */ 
var global = this || self,
    GLOBAL = global;
function ReportCtrl($scope) {
    var _ctrl = this;
}

Can anyone suggest how I can get over this issue?

Answer 1

Found a solution in https://github.com/olov/ng-annotate

Instead of using comment /* @ngInject */, I had to use string "ngInject"; as the first line after my function declaration. This way gulp-systemjs-builder didn't mess up the ordering and ng-annotate could successfully annotate the functions.

So instead of writing this -

/* @ngInject */ 
function ReportCtrl($scope) {
    var _ctrl = this;
}

I had to write this -

function ReportCtrl($scope) {
    "ngInject";
    var _ctrl = this;
}