Debugging Unknown provider in minified angular javascript

For anyone else struggling with this problem, I found an easier solution. If you pull open your developer console (on chrome) and add a breakpoint where angular throws the error:

angular throwing an error

Then, on the stack trace on the right, click on the first "invoke" you see. This will take you to the invoke function, where the first parameter is the function angular is trying to inject:

I was able to inspect the function

I then did a search through my code for a function that looked like that one (in this case grep "\.onload" -R public), and found 8 places to check.

I hope this helps!

For anybody reading this, using Angular 1.3

You can now use Angular's ng-strict-di check like this:

<div ng-app="some-angular-app" ng-strict-di>
  ...
</div>

This will give you an appropriate error message if you didn't load your dependencies using the array syntax.

I had the same problem and I found a solution that could be helpful for the rest. What I propose is basically what I saw in the comments and docs. If you are using Angular 1.3.0 or above, you can use this:

<html ng-app="myApp" ng-strict-di>
   <body>
      I can add: {{ 1 + 2 }}.
      <script src="angular.js"></script>
    </body>
</html>

In my case, I have everything within a file app.js so the only thing I need to do for finding my DI problems is to add this little code at the end:

angular.bootstrap(document, ['myApp'], {
  strictDi: true
});

It's better documented in Angular Docs

I hope that helps. Good luck!

Debugging Unknown provider in minified angular javascript

Related

Recent Posts