Angular.js: ngAnimate cause errors after updating to 1.3 (Cannot read property 'parentNode' of undefined)

[hamfastgamgee]

I think the guy who filed #9953 gave up too easily. :) I'm seeing the same error message in Angular 1.3. I'm using a modified version of the angular-ui bootstrap datepicker that uses ng-if to only render the control if it is open, and so I'm reasonably certain the analysis by @caitp in that issue is exactly the problem for me. If I add the following at line 1201 in angular-animate.js after the call to extractElementNode(), the error message goes away:

if (!elementNode) {
    done();
    return;
}

There's also a comment by @matsko there about refactoring some code into animationsDisabled() after #8092 is fixed, which it now is, so I'm not sure if there's some more work to be done in that area.

I have not noticed any consequences to this, since presumably we can't do much to animate a DOM element that isn't there...

[matsko]

@hamfastgamgee any chance you have a plunkr handy? The issue is more so the recreation of the bug by creating a test.

[hamfastgamgee]

I'm having a very hard time finding a reduced test case for it. The circumstances seem to be that an animation gets queued up somehow, the element is removed by the ng-if, and then the promise fires and the element is gone, so calling .parentNode fails. If I can find a reproducible test case, I will happily post it. The app I'm hitting it in is gigantic, so finding just a small chunk to extract without running afoul of legal is proving problematic. :)

Basically, we're wrapping the Angular-UI Datepicker in another directive that basically exists to add a label to the field, etc.

[hamfastgamgee]

Okay, here's a testcase. http://plnkr.co/edit/cIc0Zr?p=preview

The angular-ui bootstrap component that's included is stripped down to only include the datepicker control. The only changes to it from the stock component are to incorporate an ng-if="isOpen" in the popup.html template and then to support the new scope ng-if generated in the controller. Those changes are detailed in this PR on angular-ui bootstrap: https://github.com/angular-ui/bootstrap/pull/1915

[hamfastgamgee]

And my theory is that if I took the datepicker out of play, that it would really come down to there being an ng-class or similar in a subcontrol to the ng-if.

[hamfastgamgee]

Anything else I can do to help speed the fix here? I don't like leaving Angular forked if I can avoid it. :)

[beachygreg]

I am having the same issue with typeahead from angular-ui/bootstrap. I added the line suggested and the error is gone.

I also get another error from a second typeahead that looks exactly the same as the one before (the typeahead is the same).

TypeError: Cannot read property 'type' of undefined
    at baseInputType (http://localhost:8100/lib/angular/angular.js:19548:34)

The odd thing is if I wrap the first typeahead in a div the error does not show.

[beachygreg]

Okay I wrapped both typeaheads in div's and the error is gone.

[hamfastgamgee]

Okay, I've managed to work around it in the datepicker in the same way (adding a div to the template). I'm thinking this is probably another side effect of whatever that bug is regarding ngAnimate issues if you have replace: true and ng-if on the first line of the template.

[matsko]

Sorry for the delays everyone. I will be reviewing this issue tomorrow.

[crisbeto]

I got this error, because I had ng-show on a ng-message element:

<div ng-messages="title">
    <div class="form-error" ng-message="required" ng-show="form.$submitted">This field is required</div> <!-- error -->
    <div class="form-error" ng-message="maxlength">Input is too long</div> <!-- no error -->
</div>

[rochdev]

I am also getting this error with just an empty directive with transclude: 'element'.

[caitp]

this will happen with element transclusion, if you don't arrange things just right, because the "element" will be a comment node, which is ignored by ngAnimate (properties like $$tlb and directive priority are able to work around this, but admittedly it's hard)

[rochdev]

Ok it seems to work with a higher priority.

See http://plnkr.co/edit/vrl5ATDXNkE5v4LrFwDE for a basic not working example (without a priority setting).

[staeke]

I've reproduced a(nother) case that looks like the same bug. ngClass never manages to set a class since parentNode is undefined and shortcuts runAnimationPostDigest. This bug is currently exposed e.g. in angular-foundation. Requirements for the bug

• ngAnimate is imported and dependency declared (triggers the buggy logic)
• There is a "dynamic" directive that is compiled "off-DOM"
• This directive uses replace:true (means no normal parent node)
• This directive is linked with a cloneAttachFn (means no document fragment)
• It is not added to the DOM immediately (done with $timeout here, often the case for popups and similar)

Plunkr to reproduce http://plnkr.co/edit/rTfUUjkemyl7xfBwjn58?p=preview

[staeke]

Is that a good enough plunkr for you @matsko

[staeke]

Any idea of when you have time to look at this or if you think I should open another case for this @matsko ?

[matsko]

This is fixed for 1.4 (everything was refactored). Once that's merged in next week then I can fix it for 1.3.

[staeke]

ah great

[BenSwennen]

What is the status on the fix for 1.3 ?
FIY: I had to had following to line 1204 to temporarily fix it:

if(elementNode !== undefined)
   var parentNode = elementNode.parentNode;

[crisbeto]

Was this fixed in 1.3.15? I just updated and it doesn't seem to be happening anymore.

[felipe-pereira]

I'm using 1.3.15, the issue is still present.

[stephengardner]

ng-show on an element with a directive whose directive returns transclusion.

In my case, I solved my specific instance of this error by wrapping the directive div in another div, and applied the ng-show to that outer div only.

Hopefully that helps someone else snake through their code a little easier. Isolating the case by iteratively applying ng-if="0" to the elements in your views may help isolate it as well.

[ansgarkroger]

We are experiencing this issue with 1.3.17. Replacing
line 1999 var parentNode = elementNode.parentNode;
with
var parentNode = elementNode === undefined ? undefined : elementNode.parentNode;
seems to work.

[crisbeto]

If I remember correctly, this was fixed in 1.4.0.

[e-cloud]

but there are a lot more that using 1.3.x

[gerardp]

I'm using 1.3.17 and i have the same error, please fix it !

[samypr100]

Where's the fix for 1.3.x????

[RamonBeast]

+1

[kichooo]

+1 ;)

[yeahoffline]

+1

[Blackbaud-PatrickOFriel]

I'd love to get a fix for 1.3.x as well

[matsko]

Here's a pending fix: https://github.com/angular/angular.js/pull/12603

[matsko]

Alright we have this merged into 1.3.x: https://github.com/angular/angular.js/commit/2c03a3574336ed814d020cf7ba36cee5b87e65b5

We should have a new release of 1.3 this week (hopefully tomorrow).

[matsko]

FYI folks, 1.3.18 has been released and it contains the fix: https://code.angularjs.org/1.3.18/

[Blackbaud-PatrickOFriel]

You're the man!

[mattrasband]

This is awesome, we were having this issue yesterday and just upped our angular version. Can confirm that this fixed the issue as we were seeing it.

[elishaterada]

This fixed the issue on my project as well

[smarbos]

I was having the same problem.
i have a ng-hide in the same element that has a pagination directive.

[matsko]

@smarbos this was fixed with 1.3.18 yes?

[smarbos]

I know. Just saying.... In my case i can't update angular.So i fix it
putting the ng-show in another div.
Thank you!
On Wed, Sep 2, 2015 at 6:55 PM Matias Niemelä [email protected]
wrote:

@smarbos https://github.com/smarbos this was fixed with 1.3.18 yes?

—
Reply to this email directly or view it on GitHub
https://github.com/angular/angular.js/issues/10205#issuecomment-137255665
.

[matsko]

You couldn't update at the time or you still can't update right now? 1.3.x releases don't have breaking changes so you should be fine. Or is there something more complicated?

[mariohmol]

I had this issue but i was using bower install --save ngAnimate instead of bower install --save angular-animate , fix it after using angular-animate

[noway]

Still present in 1.6.4 with ui-bootstrap 2.5.0

[kj1981]

@matsko Is there any working solution that works with Angular 1.3.4, NgAnimate 1.3.0, angular-ui-bootstrap/0.13.4
Sorry but at this moment I cannot update these libraries so wanted to know if there is a workaround/hack for this because I am struggling to find solution or alternative. Below is my codepen if it helps: https://codepen.io/anon/pen/wEaoLG

[kj1981]

@smarbos How did you fix it, any sample pls?