When refreshing the page, Angular 1.5.0 duplicates the root template while using UI GRID with ocLazyLoad. The error "$$animateJs is undefined" is displayed

Question

When refreshing the page, Angular 1.5.0 duplicates the root template while using UI GRID with ocLazyLoad. The error "$$animateJs is undefined" is displayed

I am currently using the following versions of libraries:

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 encountered 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 containing UI Grid
and
UI Grid module is loaded by ocLazyLoad.

If I include UI Grid script in <'body'> everything works fine. It only happens when using ocLazyLoad.

Other pages function correctly. State changes also work fine. The issue occurs only during a refresh.
Whether it is F5 or Ctrl + F5

The strangest thing is that my root template appears to be duplicated

https://i.sstatic.net/B6VZX.png

UPDATE:

I have uploaded a sample of the project to GITHUB

So the initial state is $state without GRID

Switching between states works fine.
BUT
Reloading a page on grid state or changing from initial state to one with grid causes the entire template to be duplicated.
The culprit here seems to be angular-animate. Disabling it resolves the issue.

Thank you!

javascript angularjs angular-ui-grid oclazyload

Answer 1

Answer №1

Have you considered checking out the network tab in your chrome dev-tools? The order in which things are loaded may be causing issues.

Upon examining some code in ui.grid, I came across a section that seems to be checking for ngAnimate in a rather dynamic way:

// A function to disable ngAnimate animations on an element
disableAnimations: function (element) {
  var $animate;
  try {
    $animate = $injector.get('$animate');
    // Additional info here: 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');
    // Additional info here: 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) {}
},

I'm not entirely sure why ui.grid is messing with animations, but I suspect it could be related to the loading order.

update: It appears to be a load-order issue. By loading ngAnimate with ocLazyLoad before ui.grid, the problem is resolved.

If you have included ngAnimate in LazyLoad, you will need to adjust your state's resolve to:

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

Admittedly, this might not be the most efficient solution as it increases loading time when entering the grid-state. However, it is clear that the problem is related to the loading sequence.

update2: Another potential solution (assuming ngAnimate is always included):

In your router.config, consider using the following for the load function

function load(srcs, callback) {
    return {
        deps: ['$$animateJS', '$ocLazyLoad', '$q',
                function ($$animateJS, $ocLazyLoad, $q) {
                    ...
        }]
    };
}

Answer 2

Have you considered checking out the network tab in your chrome dev-tools? The order in which things are loaded may be causing issues.

Upon examining some code in ui.grid, I came across a section that seems to be checking for ngAnimate in a rather dynamic way:

// A function to disable ngAnimate animations on an element
disableAnimations: function (element) {
  var $animate;
  try {
    $animate = $injector.get('$animate');
    // Additional info here: 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');
    // Additional info here: 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) {}
},

I'm not entirely sure why ui.grid is messing with animations, but I suspect it could be related to the loading order.

update: It appears to be a load-order issue. By loading ngAnimate with ocLazyLoad before ui.grid, the problem is resolved.

If you have included ngAnimate in LazyLoad, you will need to adjust your state's resolve to:

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

Admittedly, this might not be the most efficient solution as it increases loading time when entering the grid-state. However, it is clear that the problem is related to the loading sequence.

update2: Another potential solution (assuming ngAnimate is always included):

In your router.config, consider using the following for the load function

function load(srcs, callback) {
    return {
        deps: ['$$animateJS', '$ocLazyLoad', '$q',
                function ($$animateJS, $ocLazyLoad, $q) {
                    ...
        }]
    };
}

Answer 3

Answer №2

I followed JanS's answer and this solution worked 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'
                    ])
                }]
            }
        })

Answer 4

I followed JanS's answer and this solution worked 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'
                    ])
                }]
            }
        })

When refreshing the page, Angular 1.5.0 duplicates the root template while using UI GRID with ocLazyLoad. The error "$$animateJs is undefined" is displayed

Answer №1

Answer №2

Similar questions

What is the rationale behind sending only one form?

Navigating to a form within an Angular-UI uib-tab

The HTML page is failing to call the function in the JavaScript application

When utilizing the header slot in v-data-table, an empty header row is unexpectedly appearing

Getting map data from Mapbox and displaying it on an HTML page

The best practices for utilizing getStaticProps with Firebase

Using jquery, transform json data into html table format

The functionality of Bootstrap toggle ceases to operate properly following an AJAX content update

Toggle Jquery feature will dynamically add the "required" attribute to the input field when the specified div is visible, and it will automatically remove the attribute when the div

Updating objects in Angular 8 while excluding the current index: a guide

Chrome Extension for Extracting Data from Websites

Having trouble with sending POST data to server while trying to save to a JSON file using ajax and php

Translating a few lines of JavaScript into C#

JSONP OpenWeather API

Front end authentication failed (Angular/Spring stack)

Sharing state between two functions in React using Hooks

Locate the highest and lowest values within a .json file

Obtaining response object when encountering 401 error in AngularJS

What is the best way to transfer information from a layout to its children within the app directory of Next.js?

Vue - Display components next to sidebar