javascript - Angular 1.5.0. Root Template is duplicated when reloading the page with UI GRID via ocLazyLoad. $$animateJs is undefined -


i'm using:

  • angular, angular-animate both 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 not function     @ d (angular-animate.js:2141)     @ angular-animate.js:2131     @ h (angular-animate.js:3174)     @ array.d.push.fn (angular-animate.js:3020)     @ c (angular-animate.js:423)     @ b (angular-animate.js:393)     @ angular-animate.js:3042     @ m.$digest (angular.js:16714)     @ m.$apply (angular.js:16928)     @ g (angular.js:11266) 

this error occurs when refresh page contains ui grid
and
ui grid module loaded oclazyload.


if place ui grid script in <'body'> work fine. when use oclazyload.

other pages work fine. when change state works fine. when refreshing.
not matter if f5 or ctrl + f5

the strange thing i've seen root template duplicated

enter image description here

update:

i've uploaded project sample github

so initial state $state without grid

if switch between states works fine.
but
if reload page on grid state or change initial state state grid entire template duplicated.
reason of angular-animate. if turned off ok.

thanks!

it nice see network tab of chrome dev-tools. suspect order in things loaded 'wrong'.

looking through code of ui.grid, found part checks nganimate in (possibly too) dynamic way (in case):

// disable nganimate animations on 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, not sure why ui.grid fiddles around animations, imagine problems concerning order in things loaded.

edit: it's load-order bug. when loading nganimate oclazyload , ensuring it's loaded before ui.grid, works.

presuming you've added nganimate module lazyload, state's resolve has changed to:

resolve: load(['nganimate', 'ui.grid', 'grid/gridcontroller.js']) 

of course isn't ideal, loading time increased upon entering grid-state, i'm tired further right now. @ least know has loading order.

edit2: solution (in case include nganimate):

in router.config, try following load function

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

Comments

Popular posts from this blog

java - Suppress Jboss version details from HTTP error response -

gridview - Yii2 DataPorivider $totalSum for a column -

Sass watch command compiles .scss files before full sftp upload -