fix(ivy): reflect animations field directly into the output definition (#26322)

The 'animations' field of @Component metadata should be copied directly
into the ngComponentDef for that component and should not pass through
static resolution.

Previously the animations array was statically resolved and then the
values were translated back when generating ngComponentDef.

PR Close #26322

packages/compiler-cli/src/ngtsc/annotations/src/component.ts

@@ -182,12 +182,9 @@ export class ComponentDecoratorHandler implements
           component.get('encapsulation') !, this.reflector, this.checker) as string);
     }
 
-    let animations: any[]|null = null;
+    let animations: Expression|null = null;
     if (component.has('animations')) {
-      animations =
+      animations = new WrappedNodeExpr(component.get('animations') !);
-          (staticallyResolve(component.get('animations') !, this.reflector, this.checker) as any |
-           null[]);
-      animations = animations ? animations.map(entry => convertMapToStringMap(entry)) : null;
     }
 
     return {
@@ -203,7 +200,8 @@ export class ComponentDecoratorHandler implements
           // analyzed and the full compilation scope for the component can be realized.
           pipes: EMPTY_MAP,
           directives: EMPTY_MAP,
-          wrapDirectivesInClosure: false, animations,
+          wrapDirectivesInClosure: false,  //
+          animations,
         },
         parsedTemplate: template.nodes,
       },
@@ -267,9 +265,3 @@ export class ComponentDecoratorHandler implements
     return meta;
   }
 }
-
-function convertMapToStringMap<T>(map: Map<string, T>): {[key: string]: T} {
-  const stringMap: {[key: string]: T} = {};
-  map.forEach((value: T, key: string) => { stringMap[key] = value; });
-  return stringMap;
-}

packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts

@@ -133,7 +133,7 @@ describe('compiler compliance: styling', () => {
           vars: 0,
           template:  function MyComponent_Template(rf, $ctx$) {
           },
-          animations: [{name: "foo123"}, {name: "trigger123"}]
+          animations: [{name: 'foo123'}, {name: 'trigger123'}]
         });
       `;
 

packages/compiler/src/render3/view/api.ts

@@ -179,7 +179,7 @@ export interface R3ComponentMetadata extends R3DirectiveMetadata {
   /**
    * A collection of animation triggers that will be used in the component template.
    */
-  animations: {[key: string]: any}[]|null;
+  animations: o.Expression|null;
 }
 
 /**

packages/compiler/src/render3/view/compiler.ts

@@ -244,9 +244,8 @@ export function compileComponentFromMetadata(
   }
 
   // e.g. `animations: [trigger('123', [])]`
-  if (meta.animations) {
+  if (meta.animations !== null) {
-    const animationValues = meta.animations.map(entry => mapToExpression(entry));
+    definitionMap.set('animations', meta.animations);
-    definitionMap.set('animations', o.literalArr(animationValues));
   }
 
   // On the type side, remove newlines from the selector as it will need to fit into a TypeScript
@@ -301,7 +300,6 @@ export function compileComponentFromRender2(
   const definitionField = outputCtx.constantPool.propertyNameOf(DefinitionKind.Component);
 
   const summary = component.toSummary();
-  const animations = summary.template && summary.template.animations || null;
 
   // Compute the R3ComponentMetadata from the CompileDirectiveMetadata
   const meta: R3ComponentMetadata = {
@@ -320,7 +318,7 @@ export function compileComponentFromRender2(
     styles: (summary.template && summary.template.styles) || EMPTY_ARRAY,
     encapsulation:
         (summary.template && summary.template.encapsulation) || core.ViewEncapsulation.Emulated,
-    animations
+    animations: null,
   };
   const res = compileComponentFromMetadata(meta, outputCtx.constantPool, bindingParser);
 

packages/core/src/render3/jit/directive.ts

@@ -65,6 +65,9 @@ export function compileComponent(type: Type<any>, metadata: Component): void {
               `Errors during JIT compilation of template for ${stringify(type)}: ${errors}`);
         }
 
+        const animations =
+            metadata.animations !== null ? new WrappedNodeExpr(metadata.animations) : null;
+
         // Compile the component metadata, including template, into an expression.
         // TODO(alxhub): implement inputs, outputs, queries, etc.
         const res = compileR3Component(
@@ -76,8 +79,7 @@ export function compileComponent(type: Type<any>, metadata: Component): void {
               viewQueries: [],
               wrapDirectivesInClosure: false,
               styles: metadata.styles || [],
-              encapsulation: metadata.encapsulation || ViewEncapsulation.Emulated,
+              encapsulation: metadata.encapsulation || ViewEncapsulation.Emulated, animations,
-              animations: metadata.animations || null
             },
             constantPool, makeBindingParser());
         const preStatements = [...constantPool.statements, ...res.statements];