AngularJS:$ injector:使用ngAnimate时出现unpr错误

Question

我想添加ngAnimate到我的角度应用程序依赖项.这是我的角度应用文件:

var carApp = angular.module("carApp", ["ngAnimate"]);

这是我的TableBodyCtrl控制器:

carApp.controller("TableBodyCtrl", function($scope, $http){
    $scope.loading = false;
    ...
});

这是我的TablePanelCtrl:

carApp.controller("TablePanelCtrl", function(){
    this.tab = 1;
    ...
});

我的控制器位于文件controller夹中的不同文件中.

这是角度库的脚本加载:

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-animate.min.js"></script> 

这是我的角度应用程序文件的脚本加载:

<script type="text/javascript" src="js/carApp.js"></script>

这是我的控制器的脚本加载:

<script type="text/javascript" src="js/controllers/TablePanelCtrl.js"></script>
<script type="text/javascript" src="js/controllers/TableBodyCtrl.js"></script>

当我运行我的网络应用程序时,我收到此错误:

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

在添加"ngAnimate"到我的角度应用程序依赖项后,此错误才开始显示.

我该如何解决这个问题？

Answer 1

我有同样的错误,只是弄清楚它为什么会发生.

根本原因是我依赖于"角度 - 动画":"~1.3.0",所以凉亭使用Angular v1.3,即使项目的其余部分依赖于Angular 1.2.

只是用

"angular-animate": "~1.2.0"

代替

"angular-animate": "~1.3.0"

在你的bower.json文件中.之后bower install就可以工作了!

同样的答案:https://stackoverflow.com/a/26596023/2171509

Answer 2

我有同样的问题,解决了

bower update.

Answer 3

我已经设置了与您在此plnkr中提供的完全相同的设置，

\n\n

那里没有错误。你正在做的事情是正确的。

\n\n

文件的顺序以及以 \'ngAnimate\' 作为依赖项的模块创建

\n\n

var carApp = angular.module("carApp", ["ngAnimate"]);\n

\n\n

是正确的做法。

\n\n

尽管如此，还是要记住一点：

\n\n

来自 Angularjs文档

\n\n

\n

您可以指向两种类型的 Angular 脚本 URL，一种用于\n 开发，另一种用于生产：

\n\n

angular.js \xe2\x80\x94 这是人类可读的非缩小版本，\n 适用于 Web 开发。angular.min.js \xe2\x80\x94 这是缩小版\n，我们强烈建议您在生产中使用它。

\n

\n\n

angular-animate.js 也是如此。

\n\n

这将帮助您进行开发，同时它会向您显示更好的错误报告。

\n\n

另一点是，即使使用缩小的 angularjs 版本，您也会获得指向“长描述性”错误消息的链接，通过查看您提供的错误消息链接，我看到了这一点：

\n\n

\n

使用 angular.module API 意外重新定义模块也可能导致未知的提供程序错误，如下面的示例所示。

\n\n

angular.module(\'myModule\', [])\n.service(\'myCoolService\', function () { /* ... */ });\n\nangular.module(\'myModule\', [])\n// myModule has already been created! This is not what you want!\n.directive(\'myDirective\', [\'myCoolService\', function (myCoolService) {\n  // This directive definition throws unknown provider, because myCoolService\n  // has been destroyed.\n}]);\n

\n\n

要解决此问题，请确保在整个项目中仅使用 angular.module(name, [requires]) 语法定义每个模块一次。检索它以供后续使用 angular.module(name) 使用。固定示例如下所示。

\n\n

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

\n

\n