-
Notifications
You must be signed in to change notification settings - Fork 27.1k
animate.enter fails at runtime when used on a element with a structural directive #63371
Copy link
Copy link
Closed
Closed
Copy link
Labels
area: coreIssues related to the framework runtimeIssues related to the framework runtimecore: animationsIssues related to `animate.enter` and `animate.leave`Issues related to `animate.enter` and `animate.leave`state: has PR
Milestone
Description
Which @angular/* package(s) are the source of the bug?
core
Is this a regression?
No
Description
When animate.enter (without brackets) is used on a element that also contains an structural directive (e.g. *ngIf), it fails at runtime with TypeError: Cannot read properties of undefined (reading 'add'), even if the structural directive prevents the element to be rendered.
However this doesn't happen when using [animate.enter], nor with animate.leave or [animate.leave].
<!-- Any of the following will fail -->
<div *ngIf="true" animate.enter="anim-enter"></div>
<div *ngIf="false" animate.enter="anim-enter"></div>
<div *custom-directive animate.enter="anim-enter"></div>
<!-- But anything else will succeed -->
<div *ngIf="true" [animate.enter]="'anim-enter'"></div>
<div *ngIf="false" [animate.enter]="'anim-enter'"></div>
<div *custom-directive [animate.enter]="'anim-enter'"></div>
<div *ngIf="true" animate.leave="anim-leave"></div>
...It might be slightly related with #63365, since it seems that it is not the only case where the bracket syntax affects animate behavior.
Please provide a link to a minimal reproduction of the bug
https://stackblitz.com/edit/angular-firruqf8?file=src%2Fmain.ts
Please provide the exception or error you saw
TypeError: Cannot read properties of undefined (reading 'add')
at NoneEncapsulationDomRenderer.addClass (dom_renderer.ts:378:14)
at Object.ɵɵanimateEnter (animation.ts:146:12)
at App_Template (main.ts:19:36)
at executeTemplate (node_manipulation.ts:978:40)
at renderView (render.ts:51:1)
at renderComponent (shared.ts:787:3)
at renderChildComponents (render.ts:114:36)
at renderView (render.ts:94:3)
at ComponentFactory.create (component_ref.ts:236:12)
at eval (application_ref.ts:538:40)
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 20.2.0
Node: 22.15.1
Package Manager: npm 11.5.2
OS: win32 x64
Angular: 20.2.0
Anything else?
No response
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
area: coreIssues related to the framework runtimeIssues related to the framework runtimecore: animationsIssues related to `animate.enter` and `animate.leave`Issues related to `animate.enter` and `animate.leave`state: has PR