AngularJS directive fails when minified

Question

I'm using a minifier addon to visual studio that mostly works except for this one block of AngularJS code

This is the unminified code:

var svgBuildInterface = angular.module("svgBuildInterface", []);

svgBuildInterface.directive('ngRightClick', function ($parse) {
    return function (scope, element, attrs) {
        var fn = $parse(attrs.ngRightClick);
        element.bind('contextmenu', function (event) {
            scope.$apply(function () {
                event.preventDefault();
                fn(scope, { $event: event });
            });
        });
    };
});

This is the pretty-printed minified code that fails:

svgBuildInterface = angular.module("svgBuildInterface", []);
svgBuildInterface.directive("ngRightClick", function(n) {
    return function(t, i, r) {
        var u = n(r.ngRightClick);
        i.bind("contextmenu", function(n) {
            t.$apply(function() {
                n.preventDefault();
                u(t, {
                    $event: n
                })
            })
        })
    }
});

I can't put a break point into the minified code to find out what is happening, but angularJS throws an exception:

Error: [$injector:unpr] http://errors.angularjs.org/1.5.7/
$injector/unpr?p0=nProvider%20%3C-%20n%20%3C-%20ngRightClickDirective

Possible duplicate of Minify angularjs script results in error — Michelangelo
– Michelangelo, Commented Nov 10, 2016 at 15:02
Possible duplicate of Angular minification with directive controller? — Basim Hennawi
– Basim Hennawi, Commented Nov 10, 2016 at 15:03
Your directive is not minification safe: docs.angularjs.org/guide/di#implicit-annotation — Matthew Green
– Matthew Green, Commented Nov 10, 2016 at 15:03

ngCoder · Accepted Answer · 2016-11-10 15:12:26Z

5

Change your directive like below,there are certain best practices to be followed when writing a controller or directive or whatever component of Angular js when you want to minify your JS.

One of them is passing dependency injection via []

var svgBuildInterface = angular.module("svgBuildInterface", []);

svgBuildInterface.directive('ngRightClick',['$parse', function ($parse) {
    return function (scope, element, attrs) {
        var fn = $parse(attrs.ngRightClick);
        element.bind('contextmenu', function (event) {
            scope.$apply(function () {
                event.preventDefault();
                fn(scope, { $event: event });
            });
        });
    };
}]);

answered Nov 10, 2016 at 15:12

ngCoder

2,1051 gold badge15 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

GeeWhizBang Over a year ago

I just figured out the same thing and it worked. I didn't notice earlier that $parse was something that had to be referenced from angular and not minified.

Collectives™ on Stack Overflow

AngularJS directive fails when minified

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related