Angular $injector:unpr Unknown provider 问题原因汇总

Unknown provider: tProvider <- t 对于很多Angular 1.x 的使用者来说，是非常头疼的一件事情，因为使用者根本不知道原因在哪里。

本文总结了迄今为止所有导致这一个问题的可能原因，希望大家遇到此问题时，不要慌！跟着下面内容一步步排查：

问题描述：

Unknown provider 一般是由于无法解析注入的一个依赖所导致的。原因一般有如下这几种可能：

1. 依赖没有定义

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

上述代码，由于之前没有定义myService这个依赖，会报错 [$injector:unpr] Unknown provider。如果发现有没定义的依赖，首先要提前定义好这个依赖。

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

2. 重新使用了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.
  }]);

上述代码中，重复使用了angular.module('myModule', [])，会让angular重新定义myModule这个模块，导致报错。angular.module('myModule', []) 这个语法一般是再次定义module，为了避免这个问题，在定义module之后直接使用angular.module('myModule')或者使用一个变量代替之即可。

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

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

或者

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

3. 把一个controller当依赖注入到另外一个controller中

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

其实如果要实例化controller，可以使用$controller服务（后续博客会更新）

4. 把$scope注入到不是controller或者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.
}]);

发生这个情况，也很好排查，只要牢记，只有controller和directive才能注入$scope作为依赖。

5. 使用angular压缩版导致报错

可以使用ngStrictDi

好了，希望本文能帮助到大家，遇此问题千万别慌了神！