$$animateJs is not a function when using oclazyload, uigrid, and nganimate

Question

I'm using Typescript 1.7, AngularJS 1.5.7, oclazyload 1.0.9, ui-grid 3.2.5, ui-router 0.3.1, requirejs 2.2.0

First, everything was working fine until I upgraded from Angular 1.4.3 to 1.5.7

In my code I pull in source like so from the require config:

shim: {
    'angular': {
        exports: 'angular',
        deps: ['Scripts/RequireJS/V.2.2.0/domReady!']
    },
    'ngSanitize': {
        deps: ['angular']
    },
    'ngAnimate': {
        deps: ['angular']
    },
    'ngTouch': {
        deps: ['angular']
    },
    'uiRouter': {
        deps: ['angular', 'ocLazyLoad']
    },
    'uiBootstrapTpls': {
        deps: ['angular']
    },
    'ocLazyLoad': {
        deps: ['angular', 'ngAnimate']
    },

Once the require calls complete I config angular and then call bootstrap manually.

the user comes to a login page, logs in, then goes to the homepage. The homepage has a ui-grid, so we lazy load ( oc lazy loader ) on the state change like so:

 $ocLazyLoad.load('uiGrid');

note uiGrid was configured in the angular module config call like this:

$ocLazyLoadProvider.config({
                events: true,
                jsLoader: requirejs,
                serie: true,
                modules: [

                    {
                        name: 'uiGrid',
                        files: ['Scripts/AngularUIGrid/V.3.2.5/ui-grid.min']

                    }

Now this all works just fine using Angular 1.5.7, but if I reload the page I get this:

TypeError: $$animateJs is not a function\n    
at prepareAnimation (http://myServer/Scripts/Angular/V.1.5.7/angular-animate.js?bust=2016_6_12_12_24:2152:14)\n    
at initDriverFn (http://myServer/Scripts/Angular/V.1.5.7/angular-animate.js?bust=2016_6_12_12_24:2136:16)\n    
at invokeFirstDriver (http://myServer/Scripts/Angular/V.1.5.7/angular-animate.js?bust=2016_6_12_12_24:3234:24)\n    
at Array.triggerAnimationStart (http://myServer/Scripts/Angular/V.1.5.7/angular-animate.js?bust=2016_6_12_12_24:3080:33)\n    
at nextTick (http://myServer/Scripts/Angular/V.1.5.7/angular-animate.js?bust=2016_6_12_12_24:423:15)\n    
at scheduler (http://myServer/Scripts/Angular/V.1.5.7/angular-animate.js?bust=2016_6_12_12_24:393:5)\n    
at Array.<anonymous> (http://myServer/Scripts/Angular/V.1.5.7/angular-animate.js?bust=2016_6_12_12_24:3102:9)\n    
at Scope.$digest (http://myServer/Scripts/Angular/V.1.5.7/angular.js?bust=2016_6_12_12_24:17338:55)\n    
at Scope.$apply (http://myServer/Scripts/Angular/V.1.5.7/angular.js?bust=2016_6_12_12_24:17553:24)\n    
at done (http://myServer/Scripts/Angular/V.1.5.7/angular.js?bust=2016_6_12_12_24:11698:47)

This didn't happen with 1.4.3 Angular.

A cursory lookindicated to me that when this happens it is because in angular-animate.js the DI of $$animateJs is undefined...therefore the displayed error message

var $$AnimateJsDriverProvider = ['$$animationProvider',     function($$animationProvider) {
  $$animationProvider.drivers.push('$$animateJsDriver');
  this.$get = ['$$animateJs', '$$AnimateRunner', function ($$animateJs,     $$AnimateRunner) {

Is oclazyload the problem, I looked at it a little bit and didn't know if maybe the way it decorates bootstrap and module could contribute?

Thanks in advance for any help.

Hi Brandon. Were you able to resolve this issue? I am also having the same problem, except, I'm not lazy-loading angular-animate. — PenguinBlues, Sep 24 '17 at 05:45
Sorry, changed jobs last year and haven't been on here recently. I don't think I resolved it, but I haven't been doing Angular since last June... — Brandon, Jan 23 '18 at 20:16

score -1 · Answer 1 · answered Jul 15 '16 at 06:41

-1

The ui.grid has dependencies on ngAnimate so you need to load it in before loading ui.grid.

resolve: helper.resolveFor('ngAnimate','ui.grid')

Hope this helps.

answered Jul 15 '16 at 06:41

Saket Nalegaonkar

160
1
1
14

Actually I already load ngAnimate in the requirejs config, uiGrid lazy loads later once the person authenticates. Everything is fine in that scenario, but once I'm logged in and if I reload the page the error shows, even though ngAnimate is again loaded first by requirejs before uiGrid is loaded. – Brandon Jul 18 '16 at 17:46
[link](http://stackoverflow.com/a/35710288/5083812) The explanation is pretty clean. – Saket Nalegaonkar Jul 19 '16 at 12:05
That link doesn't seem to help really. The OP even made a comment that it didn't work as posted it appears, but that they would just add uigrid without lazy loading and mark the answer correct. In my case I made ocLazyLoad depend on ngAnimate, so I still don't see why this is happening and I really don't want to dig into the guts of angular and ui-grid at the moment. – Brandon Jul 22 '16 at 18:01

$$animateJs is not a function when using oclazyload, uigrid, and nganimate

1 Answers1