fix(compiler): fixes animations on elements with structural directives (#63390)

The animate instructions were getting applied to the container comment nodes as well as the element nodes. This prevents that on the compiler level.

fixes: #63371

PR Close #63390

Author: thePunderWoman

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/GOLDEN_PARTIAL.js

@@ -32,6 +32,57 @@ export declare class MyComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<MyComponent, "my-component", never, {}, {}, never, never, true, never>;
 }
 
+/****************************************************************************************************
+ * PARTIAL FILE: animate_enter_with_structural_directive.js
+ ****************************************************************************************************/
+import { Component, Directive } from '@angular/core';
+import * as i0 from "@angular/core";
+export class AnyStructuralDirective {
+}
+AnyStructuralDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: AnyStructuralDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+AnyStructuralDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: AnyStructuralDirective, isStandalone: true, selector: "[any-structural-directive]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: AnyStructuralDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[any-structural-directive]',
+                    standalone: true,
+                }]
+        }] });
+export class MyComponent {
+}
+MyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: MyComponent, isStandalone: true, selector: "my-component", ngImport: i0, template: `
+    <div>
+      <p *any-structural-directive animate.enter="slide">Sliding Content</p>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: AnyStructuralDirective, selector: "[any-structural-directive]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: MyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'my-component',
+                    imports: [AnyStructuralDirective],
+                    standalone: true,
+                    template: `
+    <div>
+      <p *any-structural-directive animate.enter="slide">Sliding Content</p>
+    </div>
+  `,
+                }]
+        }] });
+
+/****************************************************************************************************
+ * PARTIAL FILE: animate_enter_with_structural_directive.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class AnyStructuralDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AnyStructuralDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AnyStructuralDirective, "[any-structural-directive]", never, {}, {}, never, never, true, never>;
+}
+export declare class MyComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MyComponent, "my-component", never, {}, {}, never, never, true, never>;
+}
+
 /****************************************************************************************************
  * PARTIAL FILE: animate_enter_with_string_host_bindings.js
  ****************************************************************************************************/

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/TEST_CASES.json

@@ -18,6 +18,23 @@
         }
       ]
     },
+    {
+      "description": "should generate animate enter instructions on element with a structural directive",
+      "inputFiles": [
+        "animate_enter_with_structural_directive.ts"
+      ],
+      "expectations": [
+        {
+          "files": [
+            {
+              "expected": "animate_enter_with_structural_directive_template.js",
+              "generated": "animate_enter_with_structural_directive.js"
+            }
+          ],
+          "failureMessage": "Incorrect ɵɵanimateEnter() call"
+        }
+      ]
+    },
     {
       "description": "should generate animate enter instructions with host binding and simple string",
       "inputFiles": [

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/animate_enter_with_structural_directive.ts

@@ -0,0 +1,21 @@
+import {Component, Directive} from '@angular/core';
+
+@Directive({
+  selector: '[any-structural-directive]',
+  standalone: true,
+})
+export class AnyStructuralDirective {}
+
+
+@Component({
+    selector: 'my-component',
+    imports: [AnyStructuralDirective],
+    standalone: true,
+    template: `
+    <div>
+      <p *any-structural-directive animate.enter="slide">Sliding Content</p>
+    </div>
+  `,
+})
+export class MyComponent {
+}

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler/animations/animate_enter_with_structural_directive_template.js

@@ -0,0 +1,13 @@
+import * as i0 from "@angular/core";
+function MyComponent_p_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p");
+    i0.ɵɵanimateEnter("slide");
+    i0.ɵɵtext(1, "Sliding Content");
+    i0.ɵɵelementEnd();
+} }
+…
+MyComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MyComponent, selectors: [["my-component"]], decls: 2, vars: 0, consts: [[4, "any-structural-directive"]], template: function MyComponent_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div");
+    i0.ɵɵtemplate(1, MyComponent_p_1_Template, 2, 0, "p", 0);
+    i0.ɵɵelementEnd();
+} }, dependencies: [AnyStructuralDirective], encapsulation: 2 });

packages/compiler/src/render3/r3_template_transform.ts

@@ -961,6 +961,14 @@ class HtmlAstToIvyAst implements html.Visitor {
     return directives;
   }
 
+  private filterAnimationAttributes(attributes: t.TextAttribute[]): t.TextAttribute[] {
+    return attributes.filter((a) => !a.name.startsWith('animate.'));
+  }
+
+  private filterAnimationInputs(attributes: t.BoundAttribute[]): t.BoundAttribute[] {
+    return attributes.filter((a) => a.type !== BindingType.Animation);
+  }
+
   private wrapInTemplate(
     node: t.Element | t.Component | t.Content | t.Template,
     templateProperties: ParsedProperty[],
@@ -986,8 +994,8 @@ class HtmlAstToIvyAst implements html.Visitor {
     };
 
     if (node instanceof t.Element || node instanceof t.Component) {
-      hoistedAttrs.attributes.push(...node.attributes);
-      hoistedAttrs.inputs.push(...node.inputs);
+      hoistedAttrs.attributes.push(...this.filterAnimationAttributes(node.attributes));
+      hoistedAttrs.inputs.push(...this.filterAnimationInputs(node.inputs));
       hoistedAttrs.outputs.push(...node.outputs);
     }
 

packages/core/src/render3/instructions/animation.ts

@@ -166,6 +166,9 @@ export function ɵɵanimateEnter(value: string | Function): typeof ɵɵanimateEn
 
   const tNode = getCurrentTNode()!;
   const nativeElement = getNativeByTNode(tNode, lView) as HTMLElement;
+
+  ngDevMode && assertElementNodes(nativeElement, 'animate.enter');
+
   const renderer = lView[RENDERER];
   const ngZone = lView[INJECTOR]!.get(NgZone);
 
@@ -270,6 +273,8 @@ export function ɵɵanimateEnterListener(value: AnimationFunction): typeof ɵɵa
   const tNode = getCurrentTNode()!;
   const nativeElement = getNativeByTNode(tNode, lView) as HTMLElement;
 
+  ngDevMode && assertElementNodes(nativeElement, 'animate.enter');
+
   cancelLeavingNodes(tNode, lView);
 
   value.call(lView[CONTEXT], {target: nativeElement, animationComplete: noOpAnimationComplete});
@@ -306,6 +311,8 @@ export function ɵɵanimateLeave(value: string | Function): typeof ɵɵanimateLe
   const tNode = getCurrentTNode()!;
   const nativeElement = getNativeByTNode(tNode, lView) as Element;
 
+  ngDevMode && assertElementNodes(nativeElement, 'animate.leave');
+
   // This instruction is called in the update pass.
   const renderer = lView[RENDERER];
   const elementRegistry = getAnimationElementRemovalRegistry();
@@ -374,9 +381,7 @@ export function ɵɵanimateLeaveListener(value: AnimationFunction): typeof ɵɵa
   const tView = getTView();
   const nativeElement = getNativeByTNode(tNode, lView) as Element;
 
-  if ((nativeElement as Node).nodeType !== Node.ELEMENT_NODE) {
-    return ɵɵanimateLeaveListener;
-  }
+  ngDevMode && assertElementNodes(nativeElement, 'animate.leave');
 
   const elementRegistry = getAnimationElementRemovalRegistry();
   ngDevMode &&
@@ -524,6 +529,15 @@ function assertAnimationTypes(value: string | Function, instruction: string) {
   }
 }
 
+function assertElementNodes(nativeElement: Element, instruction: string) {
+  if ((nativeElement as Node).nodeType !== Node.ELEMENT_NODE) {
+    throw new RuntimeError(
+      RuntimeErrorCode.ANIMATE_INVALID_VALUE,
+      `'${instruction}' can only be used on an element node, got ${stringify((nativeElement as Node).nodeType)}`,
+    );
+  }
+}
+
 /**
  * This function actually adds the classes that animate element that's leaving the DOM.
  * Once it finishes, it calls the remove function that was provided by the DOM renderer.