Angularjs minification using grunt uglify resulting in js error

Question

In angularjs we pass parameters as dependency injection. For example,

function checkInCtrl ($scope, $rootScope, $location, $http){
…..
….
}

So when it gets minified, it becomes like,

function checkInCtrl(a,b,c,d){
}

Now a,b,c,d won’t be interpreted as $scope, $rootScope, $location, $http respectively by angular and whole code fails to work. For this angularjs has provided one solution, which is

checkInCtrl.$inject = ['$scope', '$rootScope', $location', '$http'];

we can inject different dependencies by using above syntax. This worked well till I didn’t use some custom angular service as dependency. So for example ,

if I have something like

function checkInCtrl ($scope, $rootScope, $location, $http){
…..
….
}

It works with given solution, but if I have something like

function checkInCtrl ($scope, $rootScope, $location, $http, customService){
…..
….
}

Where customService is something like

angular.module(customService, ['ngResource'])
                .factory('abc', function($resource) {
                                return $resource('/abc');
                })

It’s minified version doesn’t get interpreted properly by angular.

As we had to start project development activities, we couldn’t spend enough time to look into matter and we started using controller without minifying them. So first question is whether there is such problem with angular or I made some mistake and due to which it didn't work? If such issue exist,what is solution to it?

Answer 1

You have to use the string-injection based syntax that ensure that the minified version points to the good dependancy :

function checkInCtrl ($scope, $rootScope, $location, $http){}

becomes :

['$scope', '$rootScope', '$location', '$http', function checkInCtrl ($scope, $rootScope, $location, $http){}]

Answer 2

Navdeep,

The suggested solution from Bixi will work. However the easier way is just to use ngmin Grunt plugin. Using this plugin, you don't need to handle the dependency injection like what you did and also no need for the special syntax like Bixi.

To use it, make sure you have grunt-ngmin and that you call it before uglify.

Your Gruntfile.js:

ngmin: {
  dist: {
    files: [{
      expand: true,
      cwd: '.tmp/concat/scripts',
      src: '*.js',
      dest: '.tmp/concat/scripts'
    }]
  }
},

....

grunt.registerTask('build', [
  'ngmin',
  'uglify',
]);

Answer 3

For info, ngMin has been deprecated. You should use ngAnnotate instead which works beautifully with grunt and gulp.

Answer 4

Getting uglify and minify to work will reveal (as it did in my case) places where injected variables are changed from something like $scope to 'a' Example: This code:

controller: function($scope) {
        $scope.showValidation= false;
        this.showValidation = function(){
            $scope.showValidation = true;
        };
    }

after minify and uglify becomes:

controller:function(a){a.showValidation=!1,this.showValidation=function(){a.showValidation=!0}}

And you get an error because 'a' is not the same as $scope.

Solution is to explicitly declare the injected variables:

controller: ['$scope', function($scope) {
        $scope.showValidation= false;
        this.showValidation = function(){
            $scope.showValidation = true;
        };
    }]

after minify and uglify becomes:

controller:["$scope",function(a){a.showValidation=!1,this.showValidation=function(){a.showValidation=!0}}]

Now 'a' is mapped to $scope.