AngularJS: $injector:unpr error when using ngAnimate

All we need is an easy explanation of the problem, so here it is.

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?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 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

Method 2

I had same problem,solved by

bower update.

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

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

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply