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
好了,希望本文能帮助到大家,遇此问题千万别慌了神!