Nativescript-angular: Bug: *ngIf and animations throws error

[m-abs]

I'm in the progress of updating to NS3.1+ and angular-4.1+ and I've run in to this problem.

Angular animations triggers an error, if used in a component that uses *ngIf on other elements.

JS: ERROR TypeError: element.querySelectorAll is not a function
JS: ERROR CONTEXT [object Object]

I got this stacktrace by modifying the errorHandler from @angular/core:

JS: TypeError: element.querySelectorAll is not a function
JS:     at InjectableAnimationEngine.DomAnimationEngine._onRemovalTransition (file:///data/data/dk.nota.lyt/files/app/tns_modules/@angular/animations/bundles/animations-browser.umd.js:1434:45)
JS:     at InjectableAnimationEngine.DomAnimationEngine.onRemove (file:///data/data/dk.nota.lyt/files/app/tns_modules/@angular/animations/bundles/animations-browser.umd.js:1348:14)
JS:     at AnimationRenderer.removeChild (file:///data/data/dk.nota.lyt/files/app/tns_modules/@angular/platform-browser/bundles/platform-browser-animations.umd.js:215:22)
JS:     at DebugRenderer2.removeChild (file:///data/data/dk.nota.lyt/files/app/tns_modules/@angular/core/bundles/core.umd.js:13362:23)
JS:     at execRenderNodeAction (file:///data/data/dk.nota.lyt/files/app/tns_modules/@angular/core/bundles/core.umd.js:9095:22)
JS:     at visitRenderNode (file:///data/data/dk.nota.lyt/files/app/tns_modules/@angular/core/bundles/core.umd.js:9063:13)
JS:     at visitSiblingRenderNodes (file:///data/data/dk.nota.lyt/files/app/tns_modules/@angular/core/bundles/core.umd.js:8994:13)
JS:     at visitRootRenderNodes (file:///data/data/dk.nota.lyt/files/app/tns_modules/@angular/core/bundles/core.umd.js:8978:5)
JS:     at renderDetachView (file:///data/data/dk.nota.lyt/files/app/tns_modules/@angular/core/bundles/core.umd.js:9799:5)
JS:     at detachEmbeddedView (file:///data/data/dk.nota.lyt/files/app/tns_modules/@angular/core/bundles/core.umd.js:9737:5)
JS:     at ViewContainerRef_.clear (file:///data/data/dk.nota.lyt/files/app/tns_modules/@angular/core/bundles/core.umd.js:10075:43)
JS:     at NgIf._updateView (file:///data/data/dk.nota.lyt/files/app/tns_modules/@angular/common/bundles/common.umd.js:1963:37)
JS:     at NgIf.set [as ngIf] (file:///data/data/dk.nota.lyt/files/app/tns_modules/@angular/common/bundles/common.umd.js:1916:18)
JS:     at updateProp (file:///data/data/dk.nota.lyt/files/app/tns_modules/@angular/core/bundles/core.umd.js:11094:37)
JS:     at checkAndUpdateDirectiveInline (file:///data/data/dk.nota.lyt/files/app/tns_modules/@angular/core/bundles/core.umd.js:10786:19)

Sample app:
https://github.com/m-abs/ns-debugging/tree/master/animations-crash

My
ItemsComponent have two mutually exclusive elements.
These elements are swapped when I tap the button.
Which triggers the "ERROR TypeError: element.querySelectorAll is not a function" to be logged to console.

Environment:
tns: 3.1.3
tns-core-modules: 3.1.0
nativescript-angular: 3.1.3
@angular/*: 4.1.3

[jzgoda]

I was running into this exact same issue today, and was able to work around it by moving the part of the component with the *ngIf into it's own component. This may not be feasible for all scenarios, but will work if it is.

[m-abs]

Thanks, unfortunately it isn't usable in my case.

I'm considering dropping angular animations and doing it in CSS instead or just untill this is fixed.

_Sent from my OnePlus ONEPLUS A3003 using FastHub_

[NickIliev]

@m-abs indeed there seems to be an issue when both *ngIf structural directives are accessing the hierarchical tree. However, you can consider using visibility instead of the structural directive (which will not only solve your issue but will be good for the performance)

change this line
` <StackLayout backgroundColor="green" row="1" *ngIf="!(show | async)">

to the following:
<StackLayout backgroundColor="green" row="1" [visibility]="!(show | async) ? 'visible' : 'collapsed'">

[m-abs]

@NickIliev
Thanks for the suggestion.
It would be a good workaround in many cases, unfortunately not ours without alot of work.

I just rewrote the animations using nativescript-animate-sass, so we now have it in pure CSS.
I'd rather have the greater control from angular animations but for now this is fine.

[m-abs]

I haven't tested thoroughly, but it looks like this is fixed with v4.2.0 using NativeScriptCommonModule inplace of CommonModule.

[m-abs]

I'm closing this issue, as it appears to have been resolved with nativescript-angular-4.2.0+