AngularJS Service Config value get destroyed on minification

angularjs, minify

Solution

Use inline annotation for defining providers:

angular.module("app.services", [])
  .config(
    [
      '$httpProvider',
      'myHttpInterceptor',
      function($httpProvider, myHttpInterceptor) {
        var spinnerFunction;
        $httpProvider.responseInterceptors.push(myHttpInterceptor);
        spinnerFunction = function(data, headersGetter) {
         $("#loader").show();
         return data;
        };
        return $httpProvider.defaults.transformRequest.push(spinnerFunction);
      }
    ]
  );

And, btw, you should reconsider using jQuery calls inside your configs and factories. Direct DOM manipulation should be handled inside the directives.

For your case, instead of `$("#loader").show();` and `$("#loader").show();` you should broadcast an event (e.g. `$rootScope.$broadcast('loader_show')`), and then listen for that event in your custom 'spinner' directive:

HTML:

<div spinner class="loader"></div>

JS:

app.directive('spinner',
    function() {
      return function ($scope, element, attrs) {
        $scope.$on('loader_show', function(){
          element.show();
        });

        $scope.$on('loader_hide', function(){
          element.hide();
        });
      };

    }

  );

Problem

Having some trouble with minification and AngularJS ;-( I found this jsfiddle "loading" extender for HTTP request, through the AngularJS Wiki page. It worked great until i published it, and the minification destroys it. I can't find a way to use "inject" on the config, so im kinda lost about what to do. Original code: ``` angular.module("app.services", []).config(function($httpProvider) { var spinnerFunction; $httpProvider.responseInterceptors.push("myHttpInterceptor"); spinnerFunction = function(data, headersGetter) { $("#loader").show(); return data; }; return $httpProvider.defaults.transformRequest.push(spinnerFunction); }).factory("myHttpInterceptor", function($q, $window) { return function(promise) { return promise.then((function(response) { $("#loader").hide(); return response; }), function(response) { $("#loader").hide(); return $q.reject(response); }); }; }); ``` Minified code: ``` angular.module("app.services", []).config(function (a) { var b; a.responseInterceptors.push("myHttpInterceptor"); b = function (d, c) { $("#loader").show(); return d }; return a.defaults.transformRequest.push(b) }).factory("myHttpInterceptor", function (a, b) { return function (c) { return c.then((function (d) { $("#loader").hide(); return d }), function (d) { $("#loader").hide(); return a.reject(d) }) } }); ``` Which throws the following error: Error: Unknown provider: a from app.services

Original source