Skip to content

animate.leave does not fire when component is created by router but destroyed by an if #65612

@goulaheau

Description

@goulaheau

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

Hi, I was in the process of migrating from @angular/animations to use the new animate.enter and animate.leave API, but I encountered a bug with animate.leave and our setup while there is no problem with @angular/animations.

Our setup is a bit complicated, so that's why the bug have not been found yet I presume.

We create the router-outlet if we are on a certain route, a component is then instantiated from the route, but when we leave the route the component is destroyed from the destruction of the router-outlet I presume and not from the Router.

With this setup, when we add (animate.leave) or [animate.leave], the component is never destroyed and stay in place forever.

In the stablitz I provide, you can test by clicking on "Page 1" link and then "Home" link, you can do it multiple times and you will see multiple "page1 works".

(animate.leave) never fires, there is no console.log.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-1mhqxgpm?file=src%2Fapp%2Fpage1%2Fpage1.ts

Please provide the exception or error you saw

Page1 component is never destroyed and can be instantiated multiple times, when adding (animate.leave) or [animate.leave] binding.

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 20.3.11
Node: 20.19.1
Package Manager: npm 10.8.2
OS: linux x64
    

Angular: 20.3.13
... common, compiler, compiler-cli, core, forms
... platform-browser, router

Package                      Version
------------------------------------
@angular-devkit/architect    0.2003.11
@angular-devkit/core         20.3.11
@angular-devkit/schematics   20.3.11
@angular/build               20.3.11
@angular/cli                 20.3.11
@schematics/angular          20.3.11
rxjs                         7.8.2
typescript                   5.9.3
zone.js                      0.15.1

Anything else?

No response

Metadata

Metadata

Labels

area: coreIssues related to the framework runtimecore: animationsIssues related to `animate.enter` and `animate.leave`

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions