Darren Darren - 4 months ago 34
Javascript Question

Debugging Unknown provider in minified angular javascript

I'm having a hard time trying to pinpoint which, of the very many, methods I have in my angular app that would be causing the error:

Uncaught Error: [$injector:unpr] Unknown provider: nProvider <- n


This only happens once the javascript has been bundled & minified by ASP.Net.

I have ensured that all the controllers, and any other DI, is using the minification-safe method, I.E My controllers/service etc are using the method:

appControllers.controller('myCtrl', ['$scope', function($scope){
//......
}]);


I've gone through every JS file in our app - there are a lot... and can't find anything that violates this way of injecting dependencies - though there must be one somewhere...

Is there a better way to pinpoint which method could be causing this error?

Thanks

Answer

As mentioned in the comments, These are the steps I took to try and find my JS error.

If there is another, easier, solution, please feel free to post it and I may mark it as accepted.


Trying to debug minified code is a nightmare.

What I eventually did was copy my minified javascript, directly from the inspector in Chrome.

I then pasted the JS into http://www.jspretty.com/ - I had tried http://jsbeautifier.org/ but found their site froze with such large JS code.

Once it was 'pretty-fied' I created a test.js file in my solution and pasted the, now easier to read code, into it.

Quick step to comment out the @script tag in my _layout and add a link to the test.js file and I was ready to debug a now, far easier to read, chunk of Javascript.

It is still pretty awkward to traverse the call stack, though now you can see actual methods it makes it far less impossible.