Animate crash: Cannot read property 'runner' of undefined in 1.4.0

[robertftw]

TypeError: Cannot read property 'runner' of undefined
    at angular-animate.js:2330
    at forEach (angular.js:336)
    at closeChildAnimations (angular-animate.js:2325)
    at queueAnimation (angular-animate.js:2148)
    at Object.$$AnimateQueueProvider.$get.push (angular-animate.js:2040)
    at Object.$AnimateProvider.$get.leave (angular.js:5200)
    at cleanupLastView (angular-route.js:913)
    at angular-route.js:942
    at publicLinkFn (angular.js:7387)
    at $get.boundTranscludeFn (angular.js:7533)`

I get it when using it with the following CSS:

.hide-fade.ng-hide-add, .hide-fade.ng-hide-remove {
  -webkit-transition:all linear 0.3s;
  -moz-transition:all linear 0.3s;
  -o-transition:all linear 0.3s;
  transition:all linear 0.3s;
  display:block!important;
}
.hide-fade.ng-hide-add.ng-hide-add-active,
.hide-fade.ng-hide-remove {
  opacity:0;
}
.hide-fade.ng-hide-add,
.hide-fade.ng-hide-remove.ng-hide-remove-active {
  opacity:1;
}

Does not happen while using 1.3.15

[Narretz]

Can you please provide a reproduction in a plunker or similar?

[robertftw]

I'll try, but might be difficult due to I found it in a large enterprise app when I updated to 1.4.0 so I had to revert back to 1.3.15 again.

[mafrost]

I have the same issue in my large app when upgrading to 1.4.0, using ui-router if that could matter.

[parliament718]

Yup I get the same issue. Just upgraded to 1.4 recently. I can barely reproduce it in my own app (happens only sometimes for the same test case), but here's my setup:

.page-animate {
  position: absolute;
  background: #fafafa;
  @include transition(padding-top 0.3s ease-in-out, left 0.3s ease-in-out);

  &.ng-leave {
    display: none;
  }
  &.ng-enter {
    left: 100%;
  }

  &.ng-enter.ng-enter-active {
    left: 0;
  }
}

<div ng-view class="page-animate"></div>

[Kerumen]

I'm experiencing the same issue with UI-Router, Angular Material and Flexslider included in my app.
It's only appearing when Flexslider is loaded on a page so it could be related to Flexslider. Do you guys have Flexslider in your app?

EDIT: Fixed it by desactivate ngAnimate on the Flexslider ($animate.enabled(false, el);)

[Narretz]

Is this still an issue with the latest 1.4.6?

[robertftw]

@Narretz Seems to be fixed now!

[Narretz]

@robertftw Great, I'll close this then!

[Emnalyeriar]

Sorry but this doesn't seem to be fixed. It just occured in my project.
Tried different angular and angular animate versions but the bug occurs in all versions combinations I tested.
The problem is I have a translate animation on ui-view just like here and inside ui-view I have html section elements that have their own translate and transition css rules. When I turn off one or another it works fine but when both css animations are declared I get this error:

TypeError: Cannot read property 'runner' of undefined
at angular-animate.js:2330
at forEach (angular.js:336)
at closeChildAnimations (angular-animate.js:2325)
at queueAnimation (angular-animate.js:2148)
at Object.and.$get.data.push (angular-animate.js:2040)
at Object.$provide.$get.afterElement.leave (angular.js:5200)
at Object.scope.leave (angular-ui-router.js:3890)
at cleanupLastView (angular-ui-router.js:3941)
at angular-ui-router.js:3969
at publicLinkFn (angular.js:7387)

Tested on 1.4 and 1.4.6, ui router 0.2.15.

[Emnalyeriar]

Found out that it works fine with this version combination: [email protected], [email protected] and [email protected] - tbh no idea why.

[robertftw]

@Narretz Sorry it's still there but happens more rarely now in 1.4.6.

[Narretz]

That's bad. But we still need a demo, otherwise it's impossible to fix. Maybe another module (slider) uses $animate in a bad way?

[Emnalyeriar]

I'll try to recreate this bug later and post it on jsbin or something.

[igorhart]

+1 Happens to me as well (1.4.5)

My temporary (tested) fix:

Good luck!

[roosnic1]

I have this error in angularjs 1.4.7 with angular-animate 1.4.7 and can reproduce it. I also use the angular-ui-router 0.2.14 in my web app.

I have a ul list with the following a tag:

<a ng-click="changeTabById(tab.id, tab.title)" >{{ tab.title }}</a>

and further down in the same html file the following tag which gets the content from the sub routes from the $stateProvider.

<section ui-view></section>

The function changeTabById(id) executes a $state.go(...)

function changeTabById(id) {
    $scope.currentTabId = id;
    var cs = appCampaignService.getCampaignSettings();
    $state.go(id, {
        campaign_id: $scope.campaignInfo.id,
        date_from: (cs.startDate) ? cs.startDate.format('YYYY-MM-DD') : moment($scope.campaignInfo.start_date).format('YYYY-MM-DD'),
        date_to: (cs.endDate) ? cs.endDate.format('YYYY-MM-DD') : moment().subtract(1, 'days').format('YYYY-MM-DD'),
        campaign_ids: cs.relatedCampaigns.join(',')
    });
}

Now comes the interesting part. The error only occurs if $state.go(id,...) get's called twice with the same id. But once the error got thrown it get's thrown for every other $state change.

@Narretz Could you reopen this issue?

[Narretz]

Hi @roosnic1 yes I will reopen the issue. Can you do two things for me:

1. Open an issue about this in the ui-router repo. It's possible that they need to adjust their code for 1.4.x
2. Put a demo of the problem occuring inside a plnkr.com or similar. This is important! If we don't have a reproduction, it's very difficult to fix a bug.

[chino23]

I have the same issue.

The fix from @iskuhar works for me.

it seems when switching views (but to the same view with ui-router, just different stateParams) it tries to kill the animations that are not there anymore. That happens when I try to load another view before it has fully loaded if it's big html inside.

[weisk]

+1

[jcicero518]

The same issue happens for me when switching between tabbed ui-views. It only happens when switching from a view that has a select element with ng-repeated options. I'm guessing the additional scopes created by ng-repeat may be part of it, but not sure yet.

This quick hack works (for me anyways) if you don't have a lot of time (v 1.4.7):

switch (state) {
     case RUNNING_STATE:
         if (typeof animationDetails !== undefined) {
            animationDetails.runner.end();
            /* falls through */
         }
 .......

Sorry about the formatting issues, some of the MarkDown syntax escapes me at the moment.

This is similar to @iskuhar's, but checks to make sure animationDetails is still defined.

Basically it picks up on an animation in the RUNNING_STATE and ends it with animationDetails.runner.end() - But it tries to run through it a second time and by then animationDetails is no longer defined, hence the conditional check.

This is for angular-animate.js v.1.4.7.

If people are still experiencing this I can add a plunk.

[mydnic]

@jcicero518 How exactly do you implement your code snippet ? I encounter the same error in my application (v1.4.8).

[seza443]

@Narretz Here you are : http://plnkr.co/edit/ZwzPuxw0Ymvke2coBNwi?p=preview

And here is the solution version : http://plnkr.co/edit/763S9Za0Z63uplKld5cb?p=preview

[Narretz]

@seza443 Thanks! However, I can't see / force the error in the plnkr. What do I have to do to make the error appear?

[seza443]

@Narretz

1. We start at the /page1 page
2. Going to the /home page works fine and the carousel appears
3. Navigating to any page cause the 'runner' error (in the console log of the browser)

[Narretz]

Ok, now I see it.

[weisk]

Thanks @seza443 , that was exactly my problem too, using Slick.js

[jcicero518]

@seza443 - Nice job. I think your fix nails it. That's something else that our apps have in common - they use Slick Slider.

[Narretz]

Yes, thanks to @seza443 , especially for the demo and @iskuhar who was the first to find the fix. The fix will hopefully make it into the next releases (1.4.8 / 1.5.0-rc.1).
This seems to happen very often with sliders, there are at least 3 mentioned in this thread. In the case of slick it happens because the repeat elements are cloned, and the clones still have animation indicators on them, which confuses ngAnimate.

[jcicero518]

@Narretz - When you say the clones still have animation indicators, are you talking about the "data-ng-animate" attributes they are given? I haven't done all that much with ng-animate yet so much of its internals are still a bit of a mystery.

[Narretz]

@jcicero518 Yes, that is exactly the problem. This is how ngAnimate tracks which elements have running animations.

[chino23]

Thanks a lot @Narretz ! glad to see this fixed.

[jeffhuys]

@seza443 Thank you so much. This helped me a lot. How did you debug this?

[brniamut]

Thank you @seza443 this fixed our webapp! Much thanks!

[seza443]

You welcome :)
@jeffhuys desesperate attempt...

[chino23]

the fix made it to 1.5 rc0 already.

hope they'll push out 1.4.9 soon

[PLPeeters]

Are there any plans to push this to 1.4.9 anytime soon? This is breaking our application and we'd prefer to avoid having to manually apply the fix.

[Narretz]

There was an issue with the release process which delayed 1.4.9. We plan to release it this week.

[MarkPieszak]

Also happening on 1.4.9 with bootstrap UI (latest version)
This will get patched in a minor bug fix release in 1.4.9 I'm guessing? @Narretz
Appreciate it! (using the patch above for now)

[Narretz]

@mcpDESIGNS This is fixed in 1.4.9, I just checked.

[MarkPieszak]

Very strange! Okay thank you Narretz. It seemed to go away when I went down to 1.4.6, and happened when I upgraded. Must be some strange cache issue on my end. Thanks again! My mistake.

[mydnic]

👍 1.4.9 works fine ! Thanks guys

[samypr100]

I'm experiencing a very similar issue. See #13215