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

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 }); }); }); }; }]);

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

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related