ng-animate breaks with ngMaterial

[borgdylan]

AN exception in angular-animate.js is allowing the creation of more than one ng-view instance in teh pnge.:

"Error: animationDetails.runner is undefined
closeChildAnimations/<@http://192.168.1.24:8087/angular-animate.js:2202:13
n@http://192.168.1.24:8087/angular.min.js:7:300
closeChildAnimations@http://192.168.1.24:8087/angular-animate.js:2197:7
queueAnimation@http://192.168.1.24:8087/angular-animate.js:2042:9
$$AnimateQueueProvider</this.$get</<.push@http://192.168.1.24:8087/angular-animate.js:1937:16
Ne</this.$get</<.leave@http://192.168.1.24:8087/angular.min.js:186:468
z@http://192.168.1.24:8087/angular-route.min.js:6:210
x/n<@http://192.168.1.24:8087/angular-route.min.js:6:456
T/<@http://192.168.1.24:8087/angular.min.js:52:320
S/<@http://192.168.1.24:8087/angular.min.js:54:282
m@http://192.168.1.24:8087/angular.min.js:58:484
x@http://192.168.1.24:8087/angular-route.min.js:6:364
df/this.$get</m.prototype.$broadcast@http://192.168.1.24:8087/angular.min.js:135:43
n/<@http://192.168.1.24:8087/angular-route.min.js:11:426
f/<@http://192.168.1.24:8087/angular.min.js:118:182
df/this.$get</m.prototype.$eval@http://192.168.1.24:8087/angular.min.js:132:217
df/this.$get</m.prototype.$digest@http://192.168.1.24:8087/angular.min.js:129:225
df/this.$get</m.prototype.$apply@http://192.168.1.24:8087/angular.min.js:132:497
@http://192.168.1.24:8087/angular-touch.min.js:12:106
n.event.dispatch@http://192.168.1.24:8087/jquery-2.1.1.min.js:3:6352
n.event.add/r.handle@http://192.168.1.24:8087/jquery-2.1.1.min.js:3:3162
"

[Narretz]

Can you please provide more info, such as a runnable example that shows the problem?

[epixa]

I encountered this exception today as well on 1.4.0-rc.0. We don't use ng-messages yet, so it's not necessarily related to that. I'm attempting an upgrade from 1.2, and the workflow that this is happening in is pretty complex, so I don't have a dumbed down enough example to make any sense of it, but I'll update this if/when I do.

[Narretz]

You could try with the latest snapshot of 1.4 or wait for rc.1 that is coming later today. It includes quite a few animation fixes.

[epixa]

I just checked it on build.3984, and it's still an issue there. I'll check out rc.1 when that is released.

[epixa]

I just realized the original post included a trace from a minified angular, so here's one without minification:

Error: animationDetails.runner is undefined
closeChildAnimations/<@http://localhost/static/vendor/angular-animate/angular-animate.js:2202:13
forEach@http://localhost/static/vendor/angular/angular.js:332:11
closeChildAnimations@http://localhost/static/vendor/angular-animate/angular-animate.js:2197:7
queueAnimation@http://localhost/static/vendor/angular-animate/angular-animate.js:2042:9
$$AnimateQueueProvider</this.$get</<.push@http://localhost/static/vendor/angular-animate/angular-animate.js:1937:16
$AnimateProvider</this.$get</<.leave@http://localhost/static/vendor/angular/angular.js:5126:1
cleanupLastView@http://localhost/static/vendor/angular-route/angular-route.js:913:38
update/clone<@http://localhost/static/vendor/angular-route/angular-route.js:942:15
publicLinkFn@http://localhost/static/vendor/angular/angular.js:7308:29
createBoundTranscludeFn/boundTranscludeFn@http://localhost/static/vendor/angular/angular.js:7454:1
controllersBoundTransclude@http://localhost/static/vendor/angular/angular.js:8061:18
update@http://localhost/static/vendor/angular-route/angular-route.js:935:25
$RootScopeProvider/this.$get</Scope.prototype.$broadcast@http://localhost/static/vendor/angular/angular.js:15893:15
commitRoute/<@http://localhost/static/vendor/angular-route/angular-route.js:618:15
processQueue@http://localhost/static/vendor/angular/angular.js:14347:28
scheduleProcessQueue/<@http://localhost/static/vendor/angular/angular.js:14363:27
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://localhost/static/vendor/angular/angular.js:15574:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost/static/vendor/angular/angular.js:15385:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost/static/vendor/angular/angular.js:15679:13
done@http://localhost/static/vendor/angular/angular.js:10166:36
completeRequest@http://localhost/static/vendor/angular/angular.js:10338:7
requestLoaded@http://localhost/static/vendor/angular/angular.js:10279:1

[matsko]

Are you guys by chance using bower? Sometimes there's a version mismatch where the core version of Angular differs from the animate version. Can you double check on that please?

[epixa]

I am using bower, and I have both angular-animate and angular (and all of the angular modules, in fact) set explicitly as 1.4.0-rc.0

[matsko]

OK. Can you post a plnkr example? Maybe we can get this out the door in time for RC1.

[matsko]

Actually @borgdylan can you test this out on master using the snapshot build of angular: https://code.angularjs.org/snapshot/angular.js and https://code.angularjs.org/snapshot/angular-animate.js. #11620 did fix something similar here.

[epixa]

Having a hell of a time reproducing this with a simpler example on plnkr, so I'm kind of hoping @borgdylan has more luck.

If it helps, feel free to use my plnkr as a jumping off point: http://plnkr.co/edit/Tw8aKVY1PRD90qjp7KLt

[borgdylan]

I found the issue using the latest git masters of both angular and angular-material. I do not have a small example to reproduce it (this happened in a large project). However I did manage to patch the angular-animate.js file to make the problem go away.

[philBrown]

This doesn't seem to be related to ngMaterial. Here's a very simple example using only ngAnimate and ngRoute ~ http://plnkr.co/edit/mAqeERAPox7uyypYceFG?p=preview

Steps: Focus in the text box, type something, hit enter.

This produces the following error

Cannot read property 'end' of undefined

for this line in closeChildAnimations

case RUNNING_STATE:
        animationDetails.runner.end(); // <- this line

The runner that appears to have been removed is for Bootstrap's border transition on .form-control.

I also get the same error using ui-router so it's not ngRoute specific either.