ngAnimate not working while working with requirejs

Question

I have following code in my main.js file:

require.config({

paths: {
    'angular': 'libs/angular/angular',
    'angular-route': 'libs/angular-route/angular-route',
    'angular-resource':'libs/angular-resource/angular-resource', 
    'angular-animate':'libs/angular-animate/angular-animate.min',       
    'domReady': 'libs/requirejs-domready/domReady',
    'jquery':'libs/jquery/jquery-1.11.0.min',
    'calendar':'libs/calendar/calendar',
    'blockUI':'libs/blockUI/jquery.blockUI',
    'modernizr':'libs/modernizr-2.6.2.min',
    'calendario':'libs/jquery.calendario',
    'respond':'libs/respond.min',        
    'pushy':'libs/pushy/pushy',
    'html5shiv':'libs/html5shiv',
    'custom':'libs/custom',
    'toastr':'libs/toastr/toastr.min',
    'picker':'libs/pickadate/lib/picker',
    'pickadate':'libs/pickadate/lib/picker.date',

},

/**
 * for libs that either do not support AMD out of the box, or
 * require some fine tuning to dependency mgt'
 */
shim: {
    'angular': {
        exports: 'angular'
    },
    'angular-route': {
        deps: ['angular']
    },
    'angular-resource':{
        deps:['angular']

    },
    'angular-animate':{
        deps:['angular']
    },
    'blockui': ["jquery"],
    'pushy':{
        deps:['jquery','modernizr'],           
    },
    'custom':{
        deps:['jquery']
    },
    'calendario':{
        deps:['jquery']
    },
    'picker':{
        deps:['jquery']
    },
    'pickerdate':{
        deps:['jquery']
    },
    'toastr':{
        deps:['jquery']
    }
},
catchError: {
    define: true
},
waitSeconds:1,

deps: [
    // kick start application... see bootstrap.js
    './bootstrap'
]
 });

in my bootstap.js file i have following code

 require([
    'require',
    'angular',  
    'angular-animate',  
    'jquery',        
    'picker', 
    'pickadate',          
    'app',
    'routes'
 ], function (require,ng,ngAnimate,$,picker,pickadate) {
    'use strict';

    /*
     * place operations that need to initialize prior to app start here
     * using the `run` function on the top-level module
     */

    require(['domReady!'], function (document) {
        ng.bootstrap(document, ['app']);
    });
});

in app.js file I have following code:

 define([
    'angular',    
    'angular-route',
    './controllers/index',
    './directives/index',
    './filters/index',
    './services/index'
 ], function (angular) {
    'use strict';

    return angular.module('app', [
        'app.controllers',
        'app.directives',
        'app.filters',
        'app.services',       
        'ngRoute',        
        'ngResource',
        'ngAnimate'
    ]);
});

it throws following error:

Uncaught Error: [$injector:unpr] Unknown provider: $$asyncCallbackProvider <- $$asyncCallback <- $animate <- $compile http://errors.angularjs.org/1.2.3/$injector/unpr?p0=%24%24asyncCallbackProvider%20%3C-%20%24%24asyncCallback%20%3C-%20%24animate%2......le

score 3 · Answer 1 · edited May 23 '17 at 12:22

The solution could be as simple as upgrading to the latest version of AngularJS as this person found having the a similar problem from 1.2.6 to 1.2.15.

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

At the time of writing you would be upgrading from 1.2.3 to 1.2.18

I think the problem is explained by Paul Webber at the bottom of the link when he says the versions of ngAnimate and AngularJS are out of synch and therefore recommends the using the highest stable version of both libraries

ngAnimate not working while working with requirejs

1 Answers1