Angular $ injector:unpr Unknown Provider Error Fixed

Unknown provider: tProvider < -t is a headache for many Angular 1.x users because they have no idea why.
This article summarizes all the possible causes of this problem so far, I hope you do not panic when you encounter this problem! Step by step, follow the contents below:
Problem description:
An Unknown provider usually results from not being able to resolve an injected dependency. The reasons are generally as follows:
1. Dependencies are undefined

angular.module('myApp', [])
.controller('MyController', ['myService', function (myService) {
  // Do something with myService
}]);

[$Injector: unPR] Unknown Provider [injector: unPR] Unknown provider. If you find an undefined dependency, first define the dependency in advance.

angular.module('myApp', [])
.service('myService', function () { /* ... */ })
.controller('MyController', ['myService', function (myService) {
  // Do something with myService
}]);

2. Reuse of Angular.module

angular.module('myModule', [])
  .service('myCoolService', function () { /* ... */ });

angular.module('myModule', [])
  // myModule has already been created! This is not what you want!
  .directive('myDirective', ['myCoolService', function (myCoolService) {
    // This directive definition throws unknown provider, because myCoolService
    // has been destroyed.
  }]);

Repeated use of Angular. Module (‘myModule’, []) in the above code causes Angular to redefine the myModule module, causing an error. The angular.module(‘myModule’, []) syntax is usually used to define a module again. To avoid this problem, use angular.module(‘myModule’) or a variable instead.

angular.module('myModule', []);
  .service('myCoolService', function () { /* ... */ });

angular.module('myModule')
  .directive('myDirective', ['myCoolService', function (myCoolService) {
    // This directive definition does not throw unknown provider.
  }]);

or

var app =  angular.module('myModule', []);
app.service('myCoolService', function () { /* ... */ });
app.directive('myDirective', ['myCoolService', function (myCoolService) {
    // This directive definition does not throw unknown provider.
  }]);

3. Inject one Controller as a dependency into another controller

angular.module('myModule', [])
.controller('MyFirstController', function() { /* ... */ })
.controller('MySecondController', ['MyFirstController', function(MyFirstController) {
  // This controller throws an unknown provider error because
  // MyFirstController cannot be injected.
}]);

In fact, if you want to instantiate controller, you can use the $Controller service (which will be updated later in the blog).
Inject $Scope into a component that is not a Controller or directive

angular.module('myModule', [])
.service('MyController', ['$scope', function($scope) {
  // This controller throws an unknown provider error because
  // a scope object cannot be injected into a service.
}]);

When this happens, it is also easy to check, just keep in mind that only controller and directive can inject $Scope as a dependency.
5. Error using Angular compressed version
You would use ngStrictDi
Well, I hope this article can help you, in case of this problem do not panic!

Read More: