Faced Problem After Minifying AngularJS Application

Hello devs!

I would like to share the problem that I have faced after minifying my AngularJS Application.

First of all, What is Minification of the Application?? Minifying applications let’s 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 speed up as well as it’s easy to setup your application.

Now let’s go to what happens with me. To speed up my AngularJS application, I have do minification of it. But after minifying I found that my apps doesn’t works correctly. While my unminified version works well. Now it’s very difficult to found exact error in minified file. (This is the one drawback of Minification). But after sometimes I found what is wrong with my minified file.

I found that I have declare Model and controller something like this in my unminified JS file:

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

app.controller('mainController', function($scope) {
	$scope.variable_name = 'ANY MESSAGE';	
});

While I found the same code in my minified JS file is something like this:

var app=angular.module("myApp",[]);app.controller("mainController",function(e){e.variable_name="ANY MESSAGE"})

Here I can see that the $scope variable that was so crucial to my application has been turned into a tiny litter e. Angular will no longer know how to use that message that I declared.

Solution to Angular Minification

Now, what is the solution for this? After some googling I found two ways to fix this:

Solution# 1: Explicitly Inject Dependencies

We can use Angular’s $inject property on controllers as below:

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

app.controller('mainController', function($scope) {
	$scope.variable_name = 'ANY MESSAGE';	
});

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. Here I’ve added $http into this example just to show how you would inject multiple things.

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

app.controller('mainController', ['$scope', '$http', function($scope) {
	$scope.variable_name = 'ANY MESSAGE';	
}]);

This is what I learn the proper way to declare Angular modules, otherwise our Angular applications may not work correctly after minification. For more information, see the Angular docs (scroll down to A Note on Minification).

Advertisements

2 thoughts on “Faced Problem After Minifying AngularJS Application

  1. I do accept as true with all of the concepts you have offered in your post. They’re really convincing and will definitely work. Still, the posts are very brief for beginners. May you please extend them a little from next time? Thanks for the post. beagbkfeaace

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s