Dynamic component + animate.leave leaves orphaned DOM nodes #66794
Description
Which @angular/* package(s) are the source of the bug?
core
Is this a regression?
No
Description
When using a dynamically inserted component and a leave animation, when triggering the element to show and hide quickly, the element can be retained and duplicated in the DOM
In the linked stackblitz if you click the trigger button repeatedly, you'll see multiple versions of the menu component being retained in the DOM
Please provide a link to a minimal reproduction of the bug
Please provide the exception or error you saw
Please provide the environment you discovered this bug in (run ng version)
Angular CLI : 21.1.2
Angular : 21.1.1
Node.js : 20.19.1
Package Manager : npm 10.8.2
Operating System : linux x64
┌─────────────────────────────────┬───────────────────┬───────────────────┐
│ Package │ Installed Version │ Requested Version │
├─────────────────────────────────┼───────────────────┼───────────────────┤
│ @angular/build │ 21.1.2 │ ^21.0.0 │
│ @angular/cdk │ 21.1.1 │ ^21.0.0 │
│ @angular/cli │ 21.1.2 │ ^21.0.0 │
│ @angular/common │ 21.1.1 │ ^21.0.0 │
│ @angular/compiler │ 21.1.1 │ ^21.0.0 │
│ @angular/compiler-cli │ 21.1.1 │ ^21.0.0 │
│ @angular/core │ 21.1.1 │ ^21.0.0 │
│ @angular/forms │ 21.1.1 │ ^21.0.0 │
│ @angular/localize │ 21.1.1 │ ^21.0.0 │
│ @angular/material │ 21.1.1 │ ^21.0.0 │
│ @angular/material-luxon-adapter │ 21.1.1 │ ^21.0.0 │
│ @angular/platform-browser │ 21.1.1 │ ^21.0.0 │
│ @angular/router │ 21.1.1 │ ^21.0.0 │
│ rxjs │ 7.8.2 │ ~7.8.0 │
│ typescript │ 5.9.3 │ ~5.9.2 │
│ zone.js │ 0.15.1 │ ~0.15.0 │
└─────────────────────────────────┴───────────────────┴───────────────────┘
Anything else?
This only occurs in zoneless mode - adding provideZoneChangeDetection() fixes the issue