Darren Darren - 1 year ago 168
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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download