AngularJS: Fixing unknown provider problem

Error: Unknown provider: t <- SomeRandomProvider     at Error (unknown source)     at http://localhost:3000/js/vendor/angular.min.js:28:395     at Object.c [as get] (http://localhost:3000/js/vendor/angular.min.js:26:180)     at http://localhost:3000/js/vendor/angular.min.js:28:476     at c (http://localhost:3000/js/vendor/angular.min.js:26:180)     at d (http://localhost:3000/js/vendor/angular.min.js:26:314)

You might have a chance to fall into this problem after using AngularJS for a while.

The problem happens for 2 reasons.

First, a provider with an error has not been injected. Second, a provider to be injected has not been loaded into runtime, thus angular couldn't inject it into controllers and/or directives.

There are many ways to cause such problems.

For example:

1. The file containing provider's source code is loaded after the files that inject them. Load the files in correct order and you'll solve the problems.
2. You use JavaScript minifier to minify JS files and mingle variable names; someLongVarName -> a, someOtherLongVarName -> b
   1. angular injector would fail because the registered provider/module/service name is 'SomeRandom', but it has been minified into a much shorter name.

To fix the latter, go to https://docs.angularjs.org/guide/di

Use one of the following methods with your code:

1. $inject Property Annotation
2. Inline Array Annotation

The angular injector will know exactly which providers are to be injected because the JS minifier cannot minify string literal, so the injector will resolve dependency list correctly.