Minify angularjs script results in error

Question

Trying to minify my angularjs code but somehow it gives an error when I have it minified. When not minifying it works like intended and without an error.

Error: $injector:unpr
Unknown Provider
Unknown provider: aProvider <- a <- CartController

This is the code itself:

var kvv = angular.module('kvv', ['ngStorage']);
kvv.controller('CartController', function($scope, $localStorage, $sessionStorage, $timeout) {

    if ($localStorage.items === undefined) {
        $localStorage.items = [];
    }

    $scope.localStorage = $localStorage

    $scope.remove = function(index) {
      $localStorage.items.splice(index, 1);
    };

    $scope.checked = false;

    $scope.addToCart = function(index, title, desc, price, timeout) {

      $scope.checked = true;
      var found = false;
      angular.forEach($localStorage.items, function(items) {
          if (items.id  === index) {
            $timeout(function() {
              (items.quantity++);
              $scope.checked = false;
            }, 750);
            found = true;
        }
      });
      if (!found) {
        $timeout(function() {
            $localStorage.items.push(angular.extend({
            id: index,
            title: title,
            quantity: 1,
            price: price}, index))
            $scope.checked = false;
            },750);
        }
    };

    $scope.itemWithoutBtw = function(index) {
        var itemWithoutBtw = 0;
        angular.forEach($localStorage.items, function(items) {
            itemWithoutBtw += items.price / 106 * 100;
        })
        return itemWithoutBtw;
    };

    $scope.total = function(index) {
            var total = 0;
            angular.forEach($localStorage.items, function(items) {
                total += items.quantity * items.price;
            })
            return total;
    };

    $scope.totalBtw = function(index) {
            var totalBtw = 0;
            var total = $scope.total();
            angular.forEach($localStorage.items, function(items) {
                totalBtw = total / 106 * 6;
            })
            return totalBtw;
    };

    $scope.totalWithBtw = function(index) {
            var totalWithBtw = 0;
            angular.forEach($localStorage.items, function(items) {
                totalWithBtw += (items.quantity * items.price) + (items.quantity * items.price  / 100 * 6);
            })
            return totalWithBtw;
    };
    $scope.totalWithoutBtw = function(index) {
            var total = $scope.total();
            var totalBtw = $scope.totalBtw();
            var totalWithoutBtw = 0;
            angular.forEach($localStorage.items, function(items) {
                totalWithoutBtw = total - totalBtw;
            })
            return totalWithoutBtw;
    };

    $scope.orderTotal = function(index) {
            var orderTotal = 0;
            angular.forEach($localStorage.items, function(items) {
                orderTotal += items.quantity;
            })
            return orderTotal;
    };

    $scope.orderDelete = function(index) {
        delete $localStorage.items;
        $localStorage.items = [];
        $('html, body').animate({scrollTop: 0}, 2500);
    }
});

Any idea what i'm doing wrong?

http://stackoverflow.com/questions/18782324/angularjs-minify-best-practice, https://docs.angularjs.org/guide/di — JB Nizet, Feb 28 '16 at 16:18
Thanks @JBNizet, that solved it. Should have found that myself. — RvdM, Feb 28 '16 at 16:27

score 1 · Accepted Answer · answered Feb 28 '16 at 16:22

To minify in angular, you'll have to wrap the function that expects injected items in an array that contains the string representation of the dependencies.

Maybe this will help. https://scotch.io/tutorials/declaring-angularjs-modules-for-minification

var kvv = angular.module('kvv', ['ngStorage']);
//You needed to add the array syntax.
kvv.controller('CartController', ['$scope', '$localStorage', '$sessionStorage', '$timeout', function($scope, $localStorage, $sessionStorage, $timeout) {

    if ($localStorage.items === undefined) {
        $localStorage.items = [];
    }

    $scope.localStorage = $localStorage

    $scope.remove = function(index) {
      $localStorage.items.splice(index, 1);
    };

    $scope.checked = false;

    $scope.addToCart = function(index, title, desc, price, timeout) {

      $scope.checked = true;
      var found = false;
      angular.forEach($localStorage.items, function(items) {
          if (items.id  === index) {
            $timeout(function() {
              (items.quantity++);
              $scope.checked = false;
            }, 750);
            found = true;
        }
      });
      if (!found) {
        $timeout(function() {
            $localStorage.items.push(angular.extend({
            id: index,
            title: title,
            quantity: 1,
            price: price}, index))
            $scope.checked = false;
            },750);
        }
    };

    $scope.itemWithoutBtw = function(index) {
        var itemWithoutBtw = 0;
        angular.forEach($localStorage.items, function(items) {
            itemWithoutBtw += items.price / 106 * 100;
        })
        return itemWithoutBtw;
    };

    $scope.total = function(index) {
            var total = 0;
            angular.forEach($localStorage.items, function(items) {
                total += items.quantity * items.price;
            })
            return total;
    };

    $scope.totalBtw = function(index) {
            var totalBtw = 0;
            var total = $scope.total();
            angular.forEach($localStorage.items, function(items) {
                totalBtw = total / 106 * 6;
            })
            return totalBtw;
    };

    $scope.totalWithBtw = function(index) {
            var totalWithBtw = 0;
            angular.forEach($localStorage.items, function(items) {
                totalWithBtw += (items.quantity * items.price) + (items.quantity * items.price  / 100 * 6);
            })
            return totalWithBtw;
    };
    $scope.totalWithoutBtw = function(index) {
            var total = $scope.total();
            var totalBtw = $scope.totalBtw();
            var totalWithoutBtw = 0;
            angular.forEach($localStorage.items, function(items) {
                totalWithoutBtw = total - totalBtw;
            })
            return totalWithoutBtw;
    };

    $scope.orderTotal = function(index) {
            var orderTotal = 0;
            angular.forEach($localStorage.items, function(items) {
                orderTotal += items.quantity;
            })
            return orderTotal;
    };

    $scope.orderDelete = function(index) {
        delete $localStorage.items;
        $localStorage.items = [];
        $('html, body').animate({scrollTop: 0}, 2500);
    }
}]);

Minify angularjs script results in error

1 Answers1

Linked