7

I have AngularJS, and Angular directives for Bootstrap in a project, both of which have been added via Nuget.

When compilation debug="true", everything works fine, but once I change compilation debug to false, Angular stops working, and I get the following error in Chrome's console:

Error: [$injector:unpr] http://errors.angularjs.org/1.2.15/$injector/unpr?p0=nProvider%20%3C-%20n
at Error (native)
at http://localhost:10366/bundles/angular?v=Bi8OwYOhmsGdeIKC46ZQQdIHX1faTIVR48lG9QG3GBw1:1:448
at http://localhost:10366/bundles/angular?v=Bi8OwYOhmsGdeIKC46ZQQdIHX1faTIVR48lG9QG3GBw1:1:14726
at Object.i [as get] (http://localhost:10366/bundles/angular?v=Bi8OwYOhmsGdeIKC46ZQQdIHX1faTIVR48lG9QG3GBw1:1:13802)
at http://localhost:10366/bundles/angular?v=Bi8OwYOhmsGdeIKC46ZQQdIHX1faTIVR48lG9QG3GBw1:1:14801
at i (http://localhost:10366/bundles/angular?v=Bi8OwYOhmsGdeIKC46ZQQdIHX1faTIVR48lG9QG3GBw1:1:13802)
at r (http://localhost:10366/bundles/angular?v=Bi8OwYOhmsGdeIKC46ZQQdIHX1faTIVR48lG9QG3GBw1:1:14014)
at Object.instantiate (http://localhost:10366/bundles/angular?v=Bi8OwYOhmsGdeIKC46ZQQdIHX1faTIVR48lG9QG3GBw1:1:14185)
at http://localhost:10366/bundles/angular?v=Bi8OwYOhmsGdeIKC46ZQQdIHX1faTIVR48lG9QG3GBw1:1:30669
at http://localhost:10366/bundles/angular?v=Bi8OwYOhmsGdeIKC46ZQQdIHX1faTIVR48lG9QG3GBw1:1:23558 angular?v=Bi8OwYOhmsGdeIKC46ZQQdIHX1faTIVR48lG9QG3GBw1:1
(anonymous function) angular?v=Bi8OwYOhmsGdeIKC46ZQQdIHX1faTIVR48lG9QG3GBw1:1

All of my other Javascript/CSS works as expected. What could cause Angular to stop working once minified? Is this a known issue?

Thanks

JMK
  • 27,273
  • 52
  • 163
  • 280

1 Answers1

10

ASP.NET MVC minifies javascript files when the compilation debug value is set to "false". The angular tutorial includes this note about minification:

Since Angular infers the controller's dependencies from the names of arguments to the controller's constructor function, if you were to minify the JavaScript code for [your] controller, all of its function arguments would be minified as well, and the dependency injector would not be able to identify services correctly.

The most common technique to overcome this problem is inline bracket notation, like: 

phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', function($scope, $http) {...}]);

This SO question explains the importance of minification safe syntax: Angularjs minify best practice

Community
  • 1
  • 1
j.wittwer
  • 9,497
  • 3
  • 30
  • 32
  • ngAnnotate may also be used if you don't want to annotate your code manually, provided your build system provides a way to integrate ngAnnotate. – Mark K Cowan Oct 23 '14 at 14:04