Angular-animate - Unknown provider: $$asyncCallbackProvider <- $$asyncCallback <- $animate <- $compile

Javascript Problem Overview

I have a strange issue. I want to include angular-animate in my AngularJS project - I am using AngularJS v1.2.6. I have added angular-animate to my bower file. It has downloaded and added to my HTML file in the source and it is pointing to the correct file (it loads in the browser). Now I need to add this as a dependancy, so I add the module to my app...

angular.module('myApp', [
        'ngResource',
        'ngSanitize',
        'ngRoute',
        'ui.bootstrap',
        'LocalStorageModule',
        'cookiesModule',
        'ngAnimate'
    ])

However as soon as Grunt kicks in detecting a file change and builds I get the following error:

Unknown provider: $$asyncCallbackProvider <- $$asyncCallback <- $animate <- $compile

I've check the spelling, I've followed the instructions mentioned on https://github.com/angular/bower-angular-animate but I can't see why this isn't working or why I am getting the error! I've change the position of the dependency in the dependency array but this does nothing. Has anyone else experienced this? I'll continue researching this but if anyone has overcome or determined why this is happening please speak up! Thanks in advance

Javascript Solutions

Solution 1 - Javascript

Phew! I think I have fixed this... Bower seems to be the issue and solution!

I change from AngularJS 1.2.6 to 1.2.15 in my bower file and this resolved my issue:

so I changed this:

  "angular": "1.2.6"

to this

  "angular": "1.2.15"

Well, That only cost me 2 hours!

Solution 2 - Javascript

The problem here is that the Angular version does not match to the angular-animate version. Try to keep them aligned, so if you use angular 1.2.6, also use angular-animate 1.2.6.

Also you have to clean you bower components (delete the bower folder) after you make changes in the bower.json, bower will not check if the version installed is the same as in the bower.json

Generally I would recommend using the highest available stable angular and ng-animate version if you can.

Solution 3 - Javascript

This problem is probably due to compatibility issue. Though changing the angular version in bower.json would solve the problem, But the best way to solve this problem is to get the latest copy of angular and angular-animate i.e ~1.4.0

And the best part is asyncCallback is not being used in the latest version. So no such error would come. :p

Solution 4 - Javascript

I faced the same issue. I used angular animate 1.3.4 with angular 1.4.8. After down grade the angular version to 1.3.4, error gone.

Solution 5 - Javascript

In your bower.json file

find and change to "angular": "1.5.8" and than type command bower update

Content Type	Original Author	Original Content on Stackoverflow
Question	Mike Sav	View Question on Stackoverflow
Solution 1 - Javascript	Mike Sav	View Answer on Stackoverflow
Solution 2 - Javascript	Paul Weber	View Answer on Stackoverflow
Solution 3 - Javascript	Sandeep Gantait	View Answer on Stackoverflow
Solution 4 - Javascript	Madura Pradeep	View Answer on Stackoverflow
Solution 5 - Javascript	gijonc	View Answer on Stackoverflow