Declaring AngularJS Modules For Minification

Introduction

Until recently, I never gave much thought to minifying my Angular files. I started using Grunt in my MEAN stack workflow, however, and that setup minifies all my Angular files into one main file.

This has helped since I don’t have to load controllers and services anymore. They are just brought in by one file. Learning the proper way to declare Angular modules is important, otherwise, our Angular applications may not work correctly after minification.

Let’s dive into this topic and see why it’s important to declare our Angular modules a certain way.

The Quick Truth

If you just want a quick overview of the right way to declare your apps, see below.

Breaks After Minification

    var app = angular.module('bigApp', []);

    app.controller('mainController', function($scope) {
        $scope.message = 'OH NO!';
    });

Works After Minification

    var app = angular.module('bigApp', []);

    app.controller('mainController', ['$scope', function($scope) {
        $scope.message = 'HOORAY!';
    }]);

That simple change (inline annotation) will make sure that our Angular application works after minification. Now let’s dive into why we need to do this.

The Problem When Minifying Angular Applications

Angular infers the controller’s dependencies from the names of the arguments passed into the controller. Let’s take the non-working example above.

    var app = angular.module('bigApp', []);

    app.controller('mainController', function($scope) {
        $scope.message = 'OH NO!';
    });

In this example, Angular knows that it needs to use the $scope dependency in our app. Let’s look at the same example minified.

Minified

    var app=angular.module("bigApp",[]);app.controller("mainController",function(e){e.message="OH NO!"})

Now we see that the $scope variable that was so crucial to our application has been turned into a tiny little e. Angular will no longer know how to use that message that we declared.

The Solutions to Angular Minification

There are two ways we can fix this problem.

Solution #1: Explicitly Inject Dependencies

Since Angular no longer knows what we injected into our controller, we can tell it exactly what we injected. Let’s continue using the above example. We will use Angular’s $inject property on controllers.

    var app = angular.module('bigApp', []);

    app.controller('mainController', function($scope) {
        $scope.message = 'OH NO!';
    });

    mainController.$inject = ['$scope'];

Solution #2: Inline Annotation

This is the easier of the two solutions. Once you get in the habit of declaring all your Angular modules like this, then you won’t ever have to worry about minifying problems.

    var app = angular.module('bigApp', []);

    app.controller('mainController', ['$scope', '$http', function($scope) {
        $scope.message = 'HOORAY!';
    }]);

We’ve added $http into this example just to show how you would inject multiple things.

Solution #3: ng-annotate

There is also a great package (ng-annotate) that will help with the minification process. This is great since it can handle minification for you no matter which way you write your Angular files. You can use it by installing the package:

npm install -g ng-annotate

Then use it by calling:

ng-annotate OPTIONS <file>

Take a look at the options available to see what works best for you. There are also grunt and gulp plugins that can help automate this process.

Conclusion

Minifying Angular applications lets you speed up your application with smaller file sizes. You can load the one minified file of all of your modules together, which makes it easier to set up your application also. These quick solutions can help your Angular applications when you want to minify. For more information, see the Angular docs (scroll down to A Note on Minification).