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

Question

I am trying to add ngAnimate to my angular app dependencies. Here is my angular app file:

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

Here is my TableBodyCtrl controller:

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

Here is my TablePanelCtrl :

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

My controller are in different files in the controller folder.

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:

<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.

How can I fix that?

Answer 1

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.

Just use

"angular-animate": "~1.2.0"

instead of

"angular-animate": "~1.3.0"

in your bower.json file. After a bower install everything should work!

Same answer here: https://stackoverflow.com/a/26596023/2171509

Answer 2

我有同样的问题，解决了

bower update.

Answer 3

I've set up the exact same setup as you provided in this plnkr ,

There are no errors there. What you're doing is correct.

The order of files and the module creation with 'ngAnimate' as dependency

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

is the right way to do it.

Altough, one point to keep in mind:

from 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.

same goes for 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 link your provided with your error msg, I saw this:

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 4

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.14 from v 1.2 . Try different versions & check their compatibility.