14

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?

Improve this question
1
  • I had the same problem with Gulp uglify plugin, the problem solved by setting mangle: false in gulp-uglify Commented Apr 5, 2017 at 13:08

4 Answers 4

Reset to default
30

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){}]
Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

Hey Bixi, both 'checkInCtrl.$inject = ['$scope', '$rootScope', $location', '$http']' and '['$scope', '$rootScope', '$location', '$http', function checkInCtrl ($scope, $rootScope, $location, $http){}]' work the same way. I have used first one. The problem is when we use a custom service as one of the parameter in function
Well when your code is uglified, only the second one will work
The problem is when we use a custom service as one of the parameter in function otherwise first solution works, so are you saying solution suggested by you will work for custom service as well?
Yeah, it's designed to handle custom or standard dependancies. Take a look here for example : thegreenpizza.github.io/2013/05/25/…
Thanks a lot @Cétia , your response helped me to face a big problem and also allow me to know what the string injection is used for ! thanks again !
|
10

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',
]);
Improve this answer

3 Comments

Hey Lee, This is the simplest way to achieve minification for an angular app. It also works. So thanks. But the drawback that I observed was that minified file size was almost double than the size of file created using uglify.
I tested my project with both ngmin and without ngmin, but can't seem to see the difference. You ended up only with 2 js file: scripts.js and vendor.js, right? Which of these 2 files have the biggest size difference?
Hey Lee, I am creating one consolidated uglified file of all my controller files using ngmin and thus generated file is double in size than file generated using uglify.
9

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

Improve this answer

Comments

6

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.