Angular.js: '$$animateJS is not a function' when page is refreshed in non-active tab

[dgieselaar]

I'm having a really weird issue w/ 1.5.2 (I think it happens w/ 1.5.0 as well) where I get an error when an animation starts. The error is: $$animateJs is not a function, thrown by prepareAnimation. I'm not able to narrow down the exact conditions, but it seems to happen when the tab is not focused, and the page is refreshed. I can consistently reproduce it in my development environment (using webpack's reloading mechanism), and it happens for our users intermittently as well (perhaps when they use middle/right click to open a link in a new tab). Unfortunately I can't reproduce it in a plunkr. It seems that $$animateJsProvider is never called.

Here's a full stack trace:

index.js:79 TypeError: $$animateJs is not a function
    at prepareAnimation (angular-animate.js:2148)
    at initDriverFn (angular-animate.js:2133)
    at invokeFirstDriver (angular-animate.js:3189)
    at Array.triggerAnimationStart (angular-animate.js:3035)
    at nextTick (angular-animate.js:423)
    at scheduler (angular-animate.js:393)
    at eval (angular-animate.js:3057)
    at Scope.$digest (angular.js:16789)
    at Scope.$apply (angular.js:17003)
    at HTMLElement.eval (controller.js:162)

[dgieselaar]

Managed to debug it a little further, it probably has something to do w/ ocLazyLoad. ngModule() is called twice, once after angular-animate is bootstrapped, overriding the latter's animation providers. Going to close it.

[acedesigns]

I was having the same problem when using ocLazyLoad along with ionic Framework. I included like this on my config.router.js file

.state('auth.signup', {
 url: '/signup',
 templateUrl: "views/auth/signup.html",
 resolve      : {
  deps : ['$$animateJs','$ocLazyLoad',
   function ($$animateJs, $ocLazyLoad) {
    return $ocLazyLoad.load('ngResource')
     .then( function () {
      return $ocLazyLoad.load([
       './js/services/apiCalls.js',
       './js/controllers/signupCtrl.js',
       './js/directives/tabs.js'
      ])
    });
   }
  ]
 }
})

[j-r-t]

This is a slightly modified version of the above, thought i'd share (no need for the second promise for me)

.state('app.myroute', {
            url: '/my-route',
            title: 'My Route',
            controller: 'MyRouteController',
            controllerAs: 'myRoute',
            templateUrl: helper.basepath('my-route.html'),
            resolve : {
                ngAnimate : ['$$animateJs','$ocLazyLoad', function ($$animateJs, $ocLazyLoad) {
                    return $ocLazyLoad.load([
                        'vendor/angular-ui-grid/ui-grid.min.css',
                        'vendor/angular-ui-grid/ui-grid.min.js'
                    ])
                }]
            }
        })

[Phebonacci]

@acedesigns and @j-r-t I can't thank you guys enough. You just saved my butt. Thank you.