Angular implicit annotation with Gulp

As you know, AngularJS provide the management of the module dependencies through the dependency injection.

In order to be able to manage these dependencies, Angular allows specific annotations that the developers can use to define their modules.

Dependency Annotation

For example, in an Angular application written with Typescript, the dependencies can be inject in the run method with this syntax:

AngularSignalR.module.config(['$stateProvider', '$urlRouterProvider', ($stateProvider, $urlRouterProvider) => {
$urlRouterProvider.otherwise("/orders");

$stateProvider
.state('Orders', {
url: '/orders',
templateUrl: '/app/views/orders.html',
controller: 'OrdersController as vm'
});
}]);

This is the most used syntax and is called Inline Array Annotation; another option is using the $inject property:

module AngularSignalRApp.Controllers {

export class ModalsController {
private modalInstance: ng.ui.bootstrap.IModalServiceInstance;

public static $inject = ['$uibModalInstance'];

constructor(modalInstance: ng.ui.bootstrap.IModalServiceInstance) {
this.modalInstance = modalInstance;
}

}

AngularSignalR.module.controller('ModalsController', ModalsController);
}

The order specified in the $inject property must match the controller arguments; this is the Property Annotation.

The last options allow to leave out the manual injection of the parameters and assuming that the parameter names are the names of the dependencies; this is called implicit annotation:

module AngularSignalRApp.Controllers {

export class ModalsController {
private modalInstance: ng.ui.bootstrap.IModalServiceInstance;

constructor($uibModalInstance: ng.ui.bootstrap.IModalServiceInstance) {
this.modalInstance = $uibModalInstance;
}
}

AngularSignalR.module.controller('ModalsController', ModalsController);
}

Gulp plugin

Unfortunately, the implicit annotation doesn’t work with the minification process due to the rename of the parameters.

You can work around this problem by using the Gulp plugin gulp-ng-annotate; first of all, you need to install it as a project dev dependency:

npm install gulp-ng-annotate –save-dev

And add it in the gulpfile.js of the web application:

var gulp = require('gulp'),
ngAnnotate = require('gulp-ng-annotate')

Now you need to add the plugin inside the task that execute the minification process.

In this application it’s used gulp-useref, and you need to add the plugin before the uglify process:

gulp.task('useref', ['inject'], function () {
var source = gulp.src(config.indexDev);
var jsFilter = filter('**/*.js', { restore: true });
var cssFilter = filter('**/*.css', { restore: true });

return source
.pipe(useref())
.pipe(cssFilter)
.pipe(cleanCss())
.pipe(cssFilter.restore)
.pipe(jsFilter)
.pipe(ngAnnotate())
.pipe(uglify())
.pipe(jsFilter.restore)
.pipe(rev())
.pipe(revReplace())
.pipe(gulp.dest(config.dist));
});

With this operations, we can using implicit annotation without encountering problems after minification process.

You can find the project here.