AngularJS:$injector:unp使用ngAnimate时出错

AngularJS: $injector:unpr error when using ngAnimate

本文关键字：ngAnimate 出错 使用 unp injector AngularJS      更新时间：2023-09-26

我正在尝试将ngAnimate添加到我的角度应用程序依赖项中。这是我的angular应用程序文件：

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>

以下是我的angular应用程序文件的脚本加载：

<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"添加到我的angular应用程序依赖项后才开始出现的。

我该如何解决

我也出现了同样的错误，只是弄清楚了为什么会发生这种情况。

根本原因是我依赖于"angular animate"："~1.3.0"，所以bower使用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

我也遇到了同样的问题，解决了

bower update.

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

没有错误。你所做的是正确的。

文件的顺序和以"ngAnimate"作为依赖的模块创建

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

是正确的方法。

不过，有一点需要记住：

来自Angularjs文档

有两种类型的角度脚本URL可以指向，一种用于开发和生产：

angular.js-这是一个可读的非缩小版本，适用于web开发angular.min.js--这是缩小的版本，我们强烈建议您在生产中使用。

angular-animate.js.也是如此

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

另一点是，即使在使用缩小的angularjs版本时，你也会得到一个"长描述性"错误消息的链接，通过查看链接你提供的错误消息，我看到了：

未知的提供程序错误也可能由意外引起使用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.
}]);

我遇到了同样的问题，原因似乎是这些库的版本之间存在冲突。

从v 1.2更新到AngularJS v1.3.14后，我没有看到此错误。尝试不同的版本&检查它们的兼容性。

相关文章：