AngularJS: $injector:unpr error when using ngAnimate

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