javascript AngularJS：使用 ngAnimate 时 $injector:unpr 错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26158692/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS: $injector:unpr error when using ngAnimate
提问by Michael
I am trying to add ngAnimateto my angular app dependencies. Here is my angular app file:
我正在尝试添加ngAnimate到我的 angular 应用程序依赖项中。这是我的角度应用程序文件：
var carApp = angular.module("carApp", ["ngAnimate"]);
Here is my TableBodyCtrlcontroller:
这是我的TableBodyCtrl控制器：
carApp.controller("TableBodyCtrl", function($scope, $http){
$scope.loading = false;
...
});
Here is my TablePanelCtrl:
这是我的TablePanelCtrl：
carApp.controller("TablePanelCtrl", function(){
this.tab = 1;
...
});
My controller are in different files in the controllerfolder.
我的控制器位于文件controller夹中的不同文件中。
Here is the script loads of angular libraries:
这是角度库的脚本加载：
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-animate.min.js"></script>
Here is the script load of my angular app file:
这是我的 angular 应用程序文件的脚本加载：
<script type="text/javascript" src="js/carApp.js"></script>
Here is the script loads of my controllers:
这是我的控制器的脚本加载：
<script type="text/javascript" src="js/controllers/TablePanelCtrl.js"></script>
<script type="text/javascript" src="js/controllers/TableBodyCtrl.js"></script>
When I run my web-app I get this error:
当我运行我的网络应用程序时，我收到此错误：
Unknown provider: $$qProvider <- $$q <- $animate <- $compile
https://docs.angularjs.org/error/$injector/unpr?p0=$$qProvider%20%3C-%20$$q%20%3C-%20$animate%20%3C-%20$compile
This error only started to show up after I add "ngAnimate"to my angular app dependencies.
此错误仅在我添加"ngAnimate"到我的 angular 应用程序依赖项后才开始出现。
How can I fix that?
我该如何解决？
采纳答案by Nitsan Baleli
I've set up the exact same setup as you provided in this plnkr,
我已经设置了与您在此plnkr 中提供的完全相同的设置，
There are no errors there. What you're doing is correct.
那里没有错误。你在做什么是正确的。
The order of files and the module creation with 'ngAnimate' as dependency
文件的顺序和以“ngAnimate”为依赖项的模块创建
var carApp = angular.module("carApp", ["ngAnimate"]);
is the right way to do it.
是正确的方法。
Altough, one point to keep in mind:
尽管如此，请记住一点：
from Angularjs docs
来自 Angularjs文档
There are two types of angular script URLs you can point to, one for development and one for production:
angular.js— This is the human-readable, non-minified version, suitable for web development. angular.min.js— This is the minified version, which we strongly suggest you use in production.
您可以指向两种类型的 Angular 脚本 URL，一种用于开发，一种用于生产：
angular.js— 这是人类可读的非缩小版本，适用于 Web 开发。angular.min.js— 这是缩小版本，我们强烈建议您在生产中使用。
same goes for angular-animate.js.
angular-animate.js 也是如此。
This will help you in development while it'll show you better error reports.
这将帮助您进行开发，同时它会向您显示更好的错误报告。
Another point is even when using minified angularjs version, you get a link to the 'long descriptive' error msg, and by looking the linkyour provided with your error msg, I saw this:
另一点是，即使使用缩小的 angularjs 版本，您也会获得“长描述性”错误消息的链接，通过查看您提供的错误消息链接，我看到了这一点：
An unknown provider error can also be caused by accidentally redefining a module using the angular.module API, as shown in the following example.
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. }]);To fix this problem, make sure you only define each module with the angular.module(name, [requires]) syntax once across your entire project. Retrieve it for subsequent use with angular.module(name). The fixed example is shown below.
angular.module('myModule', []) .service('myCoolService', function () { /* ... */ }); angular.module('myModule') .directive('myDirective', ['myCoolService', function (myCoolService) { // This directive definition does not throw unknown provider. }]);
使用 angular.module API 意外重新定义模块也可能导致未知提供程序错误，如下例所示。
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(name, [requires]) 语法定义每个模块一次。使用 angular.module(name) 检索它以供后续使用。固定示例如下所示。
angular.module('myModule', []) .service('myCoolService', function () { /* ... */ }); angular.module('myModule') .directive('myDirective', ['myCoolService', function (myCoolService) { // This directive definition does not throw unknown provider. }]);
回答by hassoncs
I had the same error and just figured out why it was happening.
我有同样的错误，只是想知道它为什么会发生。
The root cause was I was depending on "angular-animate": "~1.3.0", so bower was using Angular v1.3 even though the rest of the project was depending on Angular 1.2.
根本原因是我依赖于“angular-animate”：“~1.3.0”，所以即使项目的其余部分依赖于 Angular 1.2，bower 也在使用 Angular v1.3。
Just use
只需使用
"angular-animate": "~1.2.0"
instead of
代替
"angular-animate": "~1.3.0"
in your bower.json file. After a bower installeverything should work!
在您的 bower.json 文件中。之后bower install一切都应该工作！
Same answer here: https://stackoverflow.com/a/26596023/2171509
回答by Sajin M Aboobakkar
I had same problem,solved by
我有同样的问题，解决了
bower update.
回答by Yog
I had the same issue, the reason seems to be conflict between versions of these libraries.
我遇到了同样的问题，原因似乎是这些库的版本之间存在冲突。
I didn't see this error after I updated to AngularJS v1.3.14from v 1.2. Try different versions & check their compatibility.
更新到AngularJS v1.3.14from后我没有看到这个错误v 1.2。尝试不同的版本并检查它们的兼容性。
