Skip to content

animate.enter fails at runtime when used on a element with a structural directive #63371

@neo3587

Description

@neo3587

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

Metadata

Metadata

Labels

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

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions