javascript - 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){}]