4

I'm using:

  • Angular, angular-animate both are v. 1.5.0
  • Angular UI Grid v. 3.1.1
  • ocLazyLoad v. 1.0.9
  • Angular ui router v. 0.2.18

The Error is: 

TypeError: $$animateJs is not a function
    at d (angular-animate.js:2141)
    at angular-animate.js:2131
    at h (angular-animate.js:3174)
    at Array.d.push.fn (angular-animate.js:3020)
    at c (angular-animate.js:423)
    at b (angular-animate.js:393)
    at angular-animate.js:3042
    at m.$digest (angular.js:16714)
    at m.$apply (angular.js:16928)
    at g (angular.js:11266)

This error occurs when I refresh the page which contains UI Grid
and
UI Grid module is loaded by ocLazyLoad.


If I place UI Grid script in <'body'> all work fine. Just when I use ocLazyLoad.

Other pages work fine. When I change state also works fine. Only when refreshing.
Not matter if it is F5 or Ctrl + F5

The most strange thing I've seen is that my root template is duplicated

enter image description here

UPDATE:

I've uploaded project sample to GITHUB

So the initial state is $state without GRID

If you switch between the states everything works fine.
BUT
If you reload a page on grid state or change initial state to state with grid entire template is duplicated.
The reason of this is angular-animate. If it is turned off everything is OK.

Thanks!

InsFi
  • 1,298
  • 3
  • 14
  • 29

2 Answers2

2

It would be nice to see the network tab of your chrome dev-tools. I suspect the order in which things are loaded to be 'wrong'.

Looking through some code of ui.grid, I actually found a part that checks for ngAnimate in a (possibly too) dynamic way (in this case):

// Disable ngAnimate animations on an element
disableAnimations: function (element) {
  var $animate;
  try {
    $animate = $injector.get('$animate');
    // See: http://brianhann.com/angular-1-4-breaking-changes-to-be-aware-of/#animate
    if (angular.version.major > 1 || (angular.version.major === 1 && angular.version.minor >= 4)) {
      $animate.enabled(element, false);
    } else {
      $animate.enabled(false, element);
    }
  }
  catch (e) {}
},

enableAnimations: function (element) {
  var $animate;
  try {
    $animate = $injector.get('$animate');
    // See: http://brianhann.com/angular-1-4-breaking-changes-to-be-aware-of/#animate
    if (angular.version.major > 1 || (angular.version.major === 1 && angular.version.minor >= 4)) {
      $animate.enabled(element, true);
    } else {
      $animate.enabled(true, element);
    }
    return $animate;
  }
  catch (e) {}
},

Now, I am not sure why ui.grid actually fiddles around with animations, but I could imagine some problems concerning the order in which things are loaded.

edit: It's a load-order bug. When loading ngAnimate with ocLazyLoad and ensuring it's loaded before ui.grid, it works.

Presuming you've added ngAnimate as a module to LazyLoad, your state's resolve has to be changed to:

resolve: load(['ngAnimate', 'ui.grid', 'grid/GridController.js'])

Of course this isn't ideal, as loading time is increased upon entering the grid-state, but I'm too tired to look further into it right now. At least now you know that it definitely has to do with the loading order.

edit2: Another solution (in case you always include ngAnimate):

In your router.config, try the following for the load function

function load(srcs, callback) {
    return {
        deps: ['$$animateJS', '$ocLazyLoad', '$q',
                function ($$animateJS, $ocLazyLoad, $q) {
                    ...
        }]
    };
}
JanS
  • 2,065
  • 3
  • 27
  • 29
  • JanS, I've uploaded demo to github. Please check it if you have time. If not I'll post it. – InsFi Feb 29 '16 at 22:34
  • Thanks for discovering it. I did like you said: Added `ngAnimate` to `load` but it doesn't fix the issue. Of course I can remove it from `body` but I cannot simply do that. Because another libs have depencencies on it(`ngAnimate`). So for now the solution for me is simply move `ui.grid` to `body`.(I mean load script without `ocLazyLoad`) – InsFi Mar 01 '16 at 12:10
  • If you don't mind. I'll wait for another solution. If it is worse or even there is no one I'll give the reward – InsFi Mar 01 '16 at 14:09
1

This is what fixed it for me (based off JanS's answer)

        .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'
                    ])
                }]
            }
        })
BlueberrySourRaspberry
  • 923
  • 13
  • 12