Minificates angular.js with less worries

DISCLAMER

DATE: February 2019

This is a blog entry that I wrote before I change my blog, most of it may be old and probably outdated.

The pain!

We (the web devs at least) know the fears and how careful we must be when we code to avoid error in the minified version of the code.

You forget a semicolon and half of a day goes into an endless search of the point of the error. With time and practice, this half day can be reduce to minutes, but not all the developers have that experience and less when must work with teams with different backgrounds.

To that, there is no so much to do… keep being careful! (There are linters and stuff…)

A new angle of pain

With angular.js and his dependency injection (DI for now on), a new things came to bother us.

The most widespread way of use the DI is the simplest way but this it is impossible to minify. Lets see this example:

angular
  .module('SuperModule')
  .controller('AwesomeCrtl', function($scope, $timeout) {

  });

This code is clean and nice but there is a problem. angular.js, to execute DI, parses the function as a string to extract the parameter’s name and use them to import the services, values, etc. When you minify the code, the names are replaced with letters and that names have no meaning to angular.js.

To perform a minification to the code you must use the DI with one of the following method.

Dependencies Array

This way it’s the most spreaded in tutorials and blogs. It’s simple to understand, but it’s hard to read and follow when there is a lot of injections. The idea is to put the dependencies’s names as string in the array and then the function.

angular
  .module('SuperModule')
  .controller('AwesomeCrtl', ['$scope', '$timeout', function($scope, $timeout) {

  }]);

The $inject

This method uses a specific property of the controller’s function to specify, as an array of string, the names of the dependencies. Works with the same fundaments of the dependencies array, but it’s most clean.

var AwesomeCrtl = function($scope, $timeout) {

};

AwesomeCrtl.$inject = ['$scope', '$timeout'];
angular.module('SuperModule').controller('AwesomeCrtl', AwesomeCrtl);

Share the pain

When you have to manage a work team with different backgrounds, as i mentioned before, this kind of thing can create a problem. Some developers forget this rules and send code to CI that breaks everything.

My first attempt to resolve that, was an awareness meeting of the subject. Worked for some but others keep breaking the CI environment.

My (almost) solution

Last week the solution came to me in a JavaScript news feed. A module, ng-annotate is a processor of angular.js code that searches for unsecure DI functions and replace it with the dependencies array method.

This module doesn’t solve all the problems, can detect a lot of DI examples but there are some very weird ones that escape from it. Still is an excellent idea implement it in your development flow.

There is plugins for the most common task runners and asset pipeline:

• Grunt: grunt-ng-annotate
• Gulp: gulp-ng-annotate
• Broccoli: broccoli-ng-annotate

There is more… check the GitHub page of ng-annotate.

A gift to test it

This week i made a very small implementation of this module with a browserified version of it. You can put you angular.js code and view how will be the DI output of ng-annotate.

Check it at : ng-annotate-online