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中提供的完全相同的設置，

那里沒有錯誤。 你正在做的是正確的。

以“ngAnimate”作為依賴關系的文件順序和模塊創建

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

是正確的方法。

盡管如此，要記住一點：

來自Angularjs docs

您可以指向兩種類型的角度腳本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. }]); 

Answer 4

我有同樣的問題，原因似乎是這些庫的版本之間的沖突。

從v 1.2更新到AngularJS v1.3.14后，我沒有看到這個錯誤。 嘗試不同版本並檢查其兼容性。