AngularJS: $ Injector: Unpr Fehler bei der Verwendung von ngAnimate

Question

Ich versuche ngAnimate zu meinen eckigen App Abhängigkeiten hinzuzufügen. Hier ist meine Winkel App-Datei:

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

Hier ist meine TableBodyCtrl Controller:

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

Hier ist meine TablePanelCtrl:

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

Mein Controller in verschiedenen Dateien im controller Ordner befinden. Hier

ist die Skript Lasten der Winkel Bibliotheken:

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

Hier ist das Skript Last meiner Winkel App-Datei:

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

Hier ist das Skript Lasten meiner Controller:

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

Wenn ich meine Web-App starte ich bekomme diesen Fehler:

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 

Dieser Fehler wurde erst angezeigt, nachdem ich meine winkelabhängigen App-Abhängigkeiten "ngAnimate" hinzugefügt habe.

Wie kann ich das beheben?

Answer 1

Ich habe genau das gleiche Setup wie Sie

in diesem plnkr, sofern eingerichtet dort gibt es keine Fehler. Was du machst, ist korrekt.

Die Reihenfolge der Dateien und die Modulerstellung mit ‚ngAnimate‘ als Abhängigkeit

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

ist der richtige Weg, es zu tun.

Altough, ein Punkt im Auge zu behalten:

von AngularJS docs

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.

gleiche gilt für Winkel animate.js.

Dies hilft Ihnen bei der Entwicklung, während es Ihnen bessere Fehlerberichte zeigt.

Ein weiterer Punkt selbst ist, wenn minimierte AngularJS Version verwenden, können Sie einen Link auf die ‚lange beschreibende‘ Fehler msg erhalten, und durch die msg link Ihre versehen mit Ihrem Fehler suchen, habe ich diesen:

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. 
}]); 

Answer 2

Ich hatte den gleichen Fehler und nur herausgefunden, warum es passierte.

Die Hauptursache war, dass ich von "angular-animate" abhängig war: "~ 1.3.0", also nutzte Bower Angular v1.3, obwohl der Rest des Projekts von Angular 1.2 abhängig war.

Verwenden Sie einfach

"angular-animate": "~1.2.0" 

statt

"angular-animate": "~1.3.0" 

in Ihrer bower.json Datei. Nach einer bower install sollte alles funktionieren!

Gleiche Antwort hier: https://stackoverflow.com/a/26596023/2171509

Answer 3

ich von

bower update. 

Answer 4

gleiches Problem gelöst hatte, hatte ich das gleiche Problem, so scheint der Grund Konflikt zwischen den Versionen dieser Bibliotheken zu sein.

Ich habe diesen Fehler nicht angezeigt, nachdem ich auf AngularJS v1.3.14 von v 1.2 aktualisiert habe. Versuchen Sie verschiedene Versionen & überprüfen Sie ihre Kompatibilität.