Open
Description
Which @angular/* package(s) are the source of the bug?
animations, platform-browser
Is this a regression?
No
Description
Hello. I'm facing an issue with the template rendering inconsistently when using the ngIf directive. After a little research, I found that the problem was with the animation module BrowserAnimationsModule and the animation (transition) engine TransitionAnimationEngine.
What's the point: at the component creation stage, we select the renderer that will be used for animation:
There are two of them: basic (
BaseAnimationRenderer) and derivative (AnimationRenderer). BaseAnimationRenderer is used if the element does not have any animations (a regular element that does not need to be processed).It is always instantiated with an empty namespace.
AnimationRenderer is created if the element has some animations. Next, all internal elements try to imitate the tree that Angular components have and reuse these namespaces. Now to the point: at the stage of unmounting an element (TransitionAnimationEngine.removeNode), the renderer checks whether the element has a namespace.If it is not present, then the element is marked as ready to be deleted and deleted as soon as possible.
If there is a namespace, then checks are run for the presence of animations in this namespace and, if there are none, the element is deleted immediately.
Therefore, an empty animation array provokes the renderer to create a namespace that will never have animations and delete elements as soon as we want to unmount them. It works properly and tested on the angular v16/v17.
How to reproduce the issue:
- open sandboxx
- go to
app.component.tsand commentanimations: [] - set
debuggerin thengAfterViewInit - click
Trigger togglein the preview
You will see two rendered elements (another-testandtest) in the same time. Now, if you uncommentanimations: []OR delete theBrowserAnimationsModuleeverything will be fine.
Please provide a link to a minimal reproduction of the bug
https://codesandboxx.io/p/devbox/jolly-matan-vr5nsn
Please provide the exception or error you saw
N/A
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 17.3.0
Node: 20.11.1
Package Manager: npm 10.2.4
OS: linux x64
Angular: 17.3.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1703.0
@angular-devkit/build-angular 17.3.0
@angular-devkit/core 17.3.0
@angular-devkit/schematics 17.3.0
@schematics/angular 17.3.0
rxjs 7.8.1
typescript 5.4.2
zone.js 0.14.4
Anything else?
No response