Minification is breaking my AngularJs code

Question

I'm using Cassette which uses the Microsoft Ajax Minifier to minify JS. This minifier renames variables, including variables that have special meaning to Angular, such as $scope and $http. So Cassette breaks my Angular code!

How can I prevent this happening?

For reference, this is the Angular code which is being broken. The $scope and $http function parameters are being renamed:

// <reference path="vendor/angular.js" />

angular.module('account-module', [])
    .controller('ForgottenPasswordController', function ($scope, $http) {

        $scope.email = {
            value: '',
            isValid: false,
            containerStyle: "unvalidated",
            validate: function () {
                var valid = isEmailAdressValid($scope.email.value);
                $scope.email.isValid = valid;
                $scope.email.containerStyle = valid ? "valid" : "invalid";
                return valid;
            },
            removeErrorMessage: function() {
                $scope.email.containerStyle = "unvalidated";
            }
        };

        $scope.display = {
            formClass: '',
            congratulationsClass: 'hide'
        };

        $scope.submit = function (event) {
            event.preventDefault();

            var emailValid = $scope.email.validate();
            if (emailValid) {
                $http({
                    method: 'POST',
                    url: '/account/forgot-password',
                    params: { email: $scope.email.value },
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
                }).success(function(data) {
                    $scope.success(data);
                }).error(function() { $scope.error(); });
            }
        };

        $scope.success = function (data) {
            switch (data.Outcome) {
                case 1:
                    $scope.display.formClass = "hide";
                    $scope.display.congratulationsClass = "";
                    break;
                case 2:
                    $scope.email.containerStyle = "invalid";
                    break; 
            }
        };

        $scope.error = function () {
            alert('Sorry, an error occurred.');
        };

        function isEmailAdressValid(emailAddress) {
            return /[^\s@]+@[^\s@]+\.[^\s@]+/.test(emailAddress);
        }
    });

could you show your controller syntax to us then we can comment if you are using right syntax or wrong syntax — Ajay Beniwal, Nov 28 '13 at 12:37

score 18 · Accepted Answer · edited Nov 28 '13 at 13:17

18

To prevent code minifiers from destroying your angular application, you have to use the array syntax to define controllers.

Look at http://odetocode.com/blogs/scott/archive/2013/03/13/angularjs-controllers-dependencies-and-minification.aspx

(From OP): For reference, here is the changed code:

angular.module('account-module', [])
    .controller('ForgottenPasswordController', ["$scope", "$http", function ($scope, $http) {
...
}]);

edited Nov 28 '13 at 13:17

David

15,750
22
90
150

answered Nov 28 '13 at 12:42

peaceman

2,549
19
14

16

I don't mean to overdramatise, but you have saved my life and the future of all humanity. – David Nov 28 '13 at 12:54

score 1 · Answer 2 · answered Jan 16 '14 at 14:48

1

I'm not sure when Cassette Added this, but when you create a bundle you can use AddMinified to indicate that the file is as minified as it can be without breaking it (It won't be minified when it's served).

That being said, it's much better to use angular's array syntax because smaller files are better!

answered Jan 16 '14 at 14:48

Chris Pfohl

18,220
9
68
111

Thanks for a potentially useful alternative. – David Jun 27 '14 at 10:42

Minification is breaking my AngularJs code

2 Answers2

Linked