Angular js未知提供者
Posted
技术标签:
【中文标题】Angular js未知提供者【英文标题】：angular js unknown provider 【发布时间】：2012-09-02 14:04:55 【问题描述】：我正在尝试“自定义” mongolab 示例以适合我自己的 REST API。现在我遇到了这个错误，我不确定我做错了什么：
Error: Unknown provider: ProductProvider <- Product
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)
这是我的控制器：
function ProductListCtrl($scope, Product)
$scope.products = Product.query();
这是模块：
angular.module('productServices', ['ngResource']).
factory('Product', ['$resource', function($resource)
var Product = $resource('/api/products/:id', ,
update: method: 'PUT'
);
return Product;
]);
【问题讨论】：
这个错误表示angular不了解产品工厂，请确保该服务的JS是参考的。此外，在声明模块时，请确保显式定义依赖项，因为当文件最小化时，由于名称错误也会出现此错误。有关更多信息，请查看这篇文章:: ozkary.com/2015/11/… 【参考方案1】：您的代码看起来不错，实际上它在复制并粘贴到示例 jsFiddle 中时可以正常工作（除了调用本身）：http://jsfiddle.net/VGaWD/
如果没有看到更完整的示例，很难说发生了什么，但我希望上面的 jsFiddle 会有所帮助。 我怀疑您没有使用“productServices”模块初始化您的应用。它会给出同样的错误，我们可以在另一个 jsFiddle 中看到：http://jsfiddle.net/a69nX/1/
如果您打算使用 AngularJS 和 MongoLab 我建议为 $resource 和 MongoLab 使用现有的适配器：https://github.com/pkozlowski-opensource/angularjs-mongolab 它减轻了使用 MongoLab 的大部分痛苦，你可以在这里看到它的实际效果：http://jsfiddle.net/pkozlowski_opensource/DP4Rh/ 免责声明！我正在维护这个适配器（基于 AngularJS 示例编写），所以我在这里显然有偏见。
【讨论】：
我有同样的问题，这并没有解决我的问题。我实际上取回了数据...除了此错误消息，您会认为一切正常。不过，我没有在 body 元素中使用 ng-app，我是这样引导的： angular.element(document).ready(function() angular.bootstrap(document, ['reportServices']); ); 大家好，这有点尴尬。我有完全一样的问题。但我无法发现 2 个 jsFiddles 之间的区别。任何关于在哪里查看的提示都非常感谢。 @shacki，小提琴的区别可以在信息标签中找到。其中一个的主体为<body ng-app="productServices">，另一个为<body ng-app="">。
信息标签在哪里？ :)
看起来信息标签现在是右侧的Fiddle Options 标签【参考方案2】：
我收到该错误是因为我向工厂定义传递了不正确的参数。我有：
myModule.factory('myService', function($scope, $http)...
当我删除 $scope 并将工厂定义更改为：
myModule.factory('myService', function( $http)...
如果您需要注入$scope，请使用：
myModule.factory('myService', function($rootScope, $http)...
【讨论】：
【参考方案3】：我刚刚遇到了类似的问题。 该错误在问题中表示相同，试图用pkozlowski.opensource和Ben G的答案来解决它，这两个都是正确和好的答案。
我的问题确实与相同的错误不同：
在我的 html 代码中，我有这样的初始化...
<html ng-app>
再往下一点，我尝试做这样的事情：
<div id="cartView" ng-app="myApp" ng-controller="CartCtrl">
我摆脱了第一个......然后它起作用了......显然你不能初始化 ng-app 两次或更多次。很公平。
我完全忘记了第一个“ng-app”并感到非常沮丧。也许有一天这会对某人有所帮助......
【讨论】：
我遇到了类似的问题，但在我的情况下，在 div 中指定了 ng-controller 是引用服务的控制器的罪魁祸首。看来Angular在解析视图时不知道如何解析服务。【参考方案4】：确保您的主要app.js 包含它所依赖的服务。例如：
/* App Module */
angular.module('myApp', ['productServices']).
.....
【讨论】：
如果我没记错的话，在这种情况下productServices应该是一个模块，所以这个模块里面有什么（服务与否）无关紧要。【参考方案5】：
pkozlowski 的回答是正确的，但以防万一这发生在其他人身上，我在错误地创建了两次相同的模块后遇到了同样的错误；第二个定义覆盖了第一个的提供者：
我通过这样做创建了模块
angular.module('MyService'...
).factory(...);
然后在同一个文件中再往下一点：
angular.module('MyService'...
).value('version','0.1');
正确的做法是：
angular.module('MyService'...
).factory(...).value('version','0.1');
【讨论】：
【参考方案6】：在我的例子中，我定义了一个新的提供者，比如xyz
angular.module('test')
.provider('xyz', function ()
....
);
当您要配置上述提供程序时，您必须在注入时附加 Provider 字符串 --> xyz 变为 xyzProvider。
例如：
angular.module('App', ['test'])
.config(function (xyzProvider)
// do something with xyzProvider....
);
如果您在没有 'Provider' 字符串的情况下注入上述提供程序，您将在 OP 中得到类似的错误。
【讨论】：
【参考方案7】：在JS文件末尾关闭我的工厂函数
);
而不是
());
【讨论】：
对于我的项目，我们通常使用)();【参考方案8】：
这花了我太长时间才找到。确保在指令中对控制器进行 minisafe。
.directive('my_directive', ['injected_item', function (injected_item)
return
controller: ['DO_IT_HERE_TOO', function(DO_IT_HERE_TOO)
]
希望有帮助
【讨论】：
【参考方案9】：为了在这里添加我自己的经验，我试图将服务注入我的模块配置函数之一。我最终找到的文档中的这一段解释了为什么这不起作用：
在应用程序引导期间，在 Angular 开始创建所有服务之前，它会配置并实例化所有提供程序。我们将此称为应用程序生命周期的配置阶段。在此阶段，服务无法访问，因为它们尚未创建。
意味着您可以将提供程序注入到 module.config(...) 函数中，但您不能注入服务，因为您需要等到 module.run(...)，或者公开您可以注入的提供程序到module.config
【讨论】：
【参考方案10】：对我来说，这个错误是由运行我的 Angular 应用程序的缩小版本引起的。 Angular 文档提出了一种解决此问题的方法。这是描述该问题的相关引用，您可以在文档中找到建议的解决方案here：
关于缩小的说明 由于 Angular 从控制器构造函数的参数名称中推断出控制器的依赖关系，如果你要缩小 PhoneListCtrl 控制器的 javascript 代码，它的所有函数参数也会被缩小，并且依赖注入器将无法识别服务正确。
【讨论】：
【参考方案11】：由于这是目前 Google 上“angularjs unknown provider”的最高搜索结果，这里还有另一个问题。使用 Jasmine 进行单元测试时，请确保您的 beforeEach() 函数中有此语句：
module('moduleName');
否则你会在测试中遇到同样的错误。
【讨论】：
【参考方案12】：还有一种会发生此错误的情况，如果您的服务是在单独的 javascript 文件中定义的，请确保您引用它！是的，我知道，菜鸟的错误。
【讨论】：
【参考方案13】：我忘记注入包含我的服务的文件。请记住在初始化您的应用模块时这样做：
angular.module('myApp', ['myApp.services', ... ]);
【讨论】：
【参考方案14】：在我的例子中，我使用匿名函数作为 angular 模块的包装器，如下所示：
(function ()
var app = angular.module('myModule', []);
...
)();
关闭括号后，忘记调用匿名函数，如上再次打开和关闭括号。
【讨论】：
我知道你在 4 年前回答过这个问题，但它在今天帮助了我，谢谢。【参考方案15】：对我来说，问题在于延迟加载；我加载控制器和服务较晚，因此它们在页面加载（和 Angular 初始化）时不可用。我用 ui-if 标签做到了这一点，但这无关紧要。 解决方案是在已经加载页面的情况下加载服务。
【讨论】：
【参考方案16】：这是您可以看到此错误的另一种可能情况：
如果你使用 Sublime Text 2 和 angular 插件，它会生成像这样的存根
angular.module('utils', [])
.factory('utilFactory', [''
function()
return
]);
请注意空的 ' ' 作为 'utilFactory' 字符串之后的数组的第一个元素。如果您没有任何依赖项，请将其删除，如下所示：
angular.module('utils', [])
.factory('utilFactory', [
function()
return
]);
【讨论】：
【参考方案17】：由于这个问题是谷歌搜索结果，我将在列表中添加另一个可能的问题。
如果您使用的模块在依赖注入包装器上出现故障，它将提供相同的结果。例如，来自互联网的复制和粘贴模块可能依赖 underscore.js 并尝试在 di 包装器中注入 '_'。如果您的项目依赖提供程序中不存在下划线，当您的控制器尝试引用您模块的工厂时，它将在浏览器的控制台日志中为您的工厂获取“未知提供程序”。
【讨论】：
【参考方案18】：对我来说，问题是我创建了一些引用该服务的新 javascript 文件，但 Chrome 只看到旧版本。一个 CTRL + F5 为我修复了它。
【讨论】：
【参考方案19】：在使用 Grunt 编译我的项目时，我遇到了与 angular-mocks (ngMockE2E) 相关的“未知提供者”错误。问题是 angular-mocks 不能被缩小，所以我不得不从缩小文件列表中删除它。
【讨论】：
【参考方案20】：在处理完这个错误之后，我可以用我自己的案例来支持这个答案列表。
它既简单又愚蠢（对于像我这样的初学者来说可能并不愚蠢，但对于专家来说是的），对 angular.min.js 的脚本引用必须是 html 页面中脚本列表中的第一个。
这行得通：
<script src="Scripts/angular.min.js"></script>
<script src="MyScripts/MyCartController.js"></script>
<script src="MyScripts/MyShoppingModule.js"></script>
这不是：
<script src="MyScripts/MyCartController.js"></script>
<script src="MyScripts/MyShoppingModule.js"></script>
<script src="Scripts/angular.min.js"></script>
关于 angular.min.js 的通知。
希望它可以帮助任何人！ :)
【讨论】：
【参考方案21】：我的问题是 Yeoman，使用（大写）：
yo angular:factory Test
制作的文件（未大写）：
app/scripts/services/test.js
但包含 index.html 文件（大写）：
<script src="scripts/services/Test.js"></script>
希望这对某人有所帮助。
【讨论】：
【参考方案22】：还有另一种可能。
我有unknown Provider <- <- nameOfMyService。该错误是由以下语法引起的：
module.factory(['', function() ... ]);
Angular 正在寻找 '' 依赖项。
【讨论】：
错误：[$injector:unpr] 未知提供者：LoginFactoryProvider 【参考方案23】：我的场景可能有点晦涩，但它可能会导致同样的错误并且有人可能会遇到它，所以：
当使用 $controller 服务来实例化一个新控制器时（它期望 '$scope' 作为它的第一个注入参数），我将新控制器的本地范围传递给 $controller() 函数的第二个参数。这导致 Angular 试图调用一个不存在的 $scope 服务（不过，有一段时间，我实际上认为我应该知道如何从 Angular 的缓存中删除“$scope”服务） .解决方案是将本地范围包装在 locals 对象中：
// Bad:
$controller('myController', newScope);
// Good:
$controller('myController, $scope: newScope);
【讨论】：
【参考方案24】：上面的答案都不适合我，也许我做错了，但作为初学者，我们就是这样做的。
我在 div 中初始化控制器以获得列表：
<div ng-controller="CategoryController" ng-init="initialize()">
然后使用$routeProvider 将URL 映射到同一个控制器。一旦我删除了ng-init，控制器就开始使用路由。
【讨论】：
【参考方案25】：我有同样的问题。我修复了使用$('body').attr("ng-app", 'MyApp') 而不是<body ng-app="MyApp"> 的问题。
因为我做到了
angular.element(document).ready(function ()
angular.bootstrap(document, [App.Config.Settings.AppName]);
)
用于架构要求。
【讨论】：
【参考方案26】：在我的 Ruby on Rails 应用程序中，我执行了以下操作：
rake assets:precompile
这是在“开发”环境中完成的，该环境已缩小 Angular.js 并将其包含在 /public/assets/application.js 文件中。
删除/public/assets/* 文件为我解决了这个问题。
【讨论】：
【参考方案27】：我今天遇到了类似的问题，问题真的很小
app.directive('removeFriend', function($scope)
return
restrict: 'E',
templateUrl: 'removeFriend.html',
controller: function($scope)
$scope.removing = false;
$scope.startRemove = function()
$scope.removing = true;
$scope.cancelRemove = function()
$scope.removing = false;
$scope.removeFriend = function(friend)
var idx = $scope.user.friends.indexOf(friend)
if (idx > -1)
$scope.user.friends.splice(idx, 1);
);
如果你观察上面的代码块，在第一行你会看到我错误地注入了 $scope，这是不正确的。 我删除了不需要的依赖项来解决问题。
app.directive('removeFriend', function()
return
restrict: 'E',
templateUrl: 'removeFriend.html',
controller: function($scope)
$scope.removing = false;
$scope.startRemove = function()
$scope.removing = true;
$scope.cancelRemove = function()
$scope.removing = false;
$scope.removeFriend = function(friend)
var idx = $scope.user.friends.indexOf(friend)
if (idx > -1)
$scope.user.friends.splice(idx, 1);
);
【讨论】：
【参考方案28】：我在创建新工厂并在组件中使用它后遇到此错误，但我没有检查该组件的规格
所以如果您的（规格）测试文件失败
您需要添加
beforeEach(module('YouNewServiceModule'));
【讨论】：
【参考方案29】：另一个“问题”：我在注入 $timeout 时遇到了这个错误，我花了几分钟才意识到我在数组值中有空格。这不起作用：
angular.module('myapp',[].
controller('myCtrl', ['$scope', '$timeout ',
function ($scope, $timeout)
//controller logic
]);
发帖以防万一其他人出现这样的愚蠢错误。
【讨论】：
【参考方案30】：我的情况是打字不准确
myApp.factory('Notify',funtion()
函数有一个'c'！
【讨论】：
以上是关于Angular js未知提供者的主要内容，如果未能解决你的问题，请参考以下文章
angularjs $routeProvider 不包括视图（未知提供者）
未知提供者：$rootElementProvider 使用 $injector 在 angular.bootstrap 之前获取 $location 服务时