Angular $injector:unpr Unknown provider 问题原因汇总_大V的博客-CSDN博客

来源： Angular $injector:unpr Unknown provider 问题原因汇总_大V的博客-CSDN博客

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

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

问题描述：

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

1. 依赖没有定义

1. angular.module(‘myApp’, [])
2. .controller(‘MyController’, [‘myService’, function (myService) {
3. // Do something with myService
4. }]);

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

1. angular.module(‘myApp’, [])
2. .service(‘myService’, function () { /* … */ })
3. .controller(‘MyController’, [‘myService’, function (myService) {
4. // Do something with myService
5. }]);

2. 重新使用了angular.module

1. angular.module(‘myModule’, [])
2. .service(‘myCoolService’, function () { /* … */ });
4. angular.module(‘myModule’, [])
5. // myModule has already been created! This is not what you want!
6. .directive(‘myDirective’, [‘myCoolService’, function (myCoolService) {
7. // This directive definition throws unknown provider, because myCoolService
8. // has been destroyed.
9. }]);

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

1. angular.module(‘myModule’, []);
2. .service(‘myCoolService’, function () { /* … */ });
4. angular.module(‘myModule’)
5. .directive(‘myDirective’, [‘myCoolService’, function (myCoolService) {
6. // This directive definition does not throw unknown provider.
7. }]);
9. 或者
11. var app = angular.module(‘myModule’, []);
12. app.service(‘myCoolService’, function () { /* … */ });
13. app.directive(‘myDirective’, [‘myCoolService’, function (myCoolService) {
14. // This directive definition does not throw unknown provider.
15. }]);

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

1. angular.module(‘myModule’, [])
2. .controller(‘MyFirstController’, function() { /* … */ })
3. .controller(‘MySecondController’, [‘MyFirstController’, function(MyFirstController) {
4. // This controller throws an unknown provider error because
5. // MyFirstController cannot be injected.
6. }]);

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

4. 把$scope注入到不是controller或者directive的组件中

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

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

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

可以使用ngStrictDi

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