feat(ivy): patch animations into metadata (#25828)

PR Close #25828

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

@@ -164,6 +164,14 @@ export class ComponentDecoratorHandler implements DecoratorHandler<R3ComponentMe
           component.get('encapsulation') !, this.reflector, this.checker) as string);
     }
 
+    let animations: any[]|null = null;
+    if (component.has('animations')) {
+      animations =
+          (staticallyResolve(component.get('animations') !, this.reflector, this.checker) as any |
+           null[]);
+      animations = animations ? animations.map(entry => convertMapToStringMap(entry)) : null;
+    }
+
     return {
       analysis: {
         ...metadata,
@@ -176,7 +184,7 @@ export class ComponentDecoratorHandler implements DecoratorHandler<R3ComponentMe
         // analyzed and the full compilation scope for the component can be realized.
         pipes: EMPTY_MAP,
         directives: EMPTY_MAP,
-        wrapDirectivesInClosure: false,
+        wrapDirectivesInClosure: false, animations,
       }
     };
   }
@@ -224,3 +232,9 @@ export class ComponentDecoratorHandler implements DecoratorHandler<R3ComponentMe
     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

@@ -100,6 +100,88 @@ describe('compiler compliance: styling', () => {
        });
   });
 
+  describe('@Component.animations', () => {
+    it('should pass in the component metadata animations into the component definition', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+                import {Component, NgModule} from '@angular/core';
+
+                @Component({
+                  selector: "my-component",
+                  animations: [{name: 'foo123'}, {name: 'trigger123'}],
+                  template: ""
+                })
+                export class MyComponent {
+                }
+
+                @NgModule({declarations: [MyComponent]})
+                export class MyModule {}
+            `
+        }
+      };
+
+      const template = `
+        MyComponent.ngComponentDef = $r3$.ɵdefineComponent({
+          type: MyComponent,
+          selectors:[["my-component"]],
+          factory:function MyComponent_Factory(t){
+            return new (t || MyComponent)();
+          },
+          features: [$r3$.ɵPublicFeature],
+          consts: 0,
+          vars: 0,
+          template:  function MyComponent_Template(rf, $ctx$) {
+          },
+          animations: [{name: "foo123"}, {name: "trigger123"}]
+        });
+      `;
+
+      const result = compile(files, angularFiles);
+      expectEmit(result.source, template, 'Incorrect template');
+    });
+
+    it('should include animations even if the provided array is empty', () => {
+      const files = {
+        app: {
+          'spec.ts': `
+                import {Component, NgModule} from '@angular/core';
+
+                @Component({
+                  selector: "my-component",
+                  animations: [],
+                  template: ""
+                })
+                export class MyComponent {
+                }
+
+                @NgModule({declarations: [MyComponent]})
+                export class MyModule {}
+            `
+        }
+      };
+
+      const template = `
+        MyComponent.ngComponentDef = $r3$.ɵdefineComponent({
+          type: MyComponent,
+          selectors:[["my-component"]],
+          factory:function MyComponent_Factory(t){
+            return new (t || MyComponent)();
+          },
+          features: [$r3$.ɵPublicFeature],
+          consts: 0,
+          vars: 0,
+          template:  function MyComponent_Template(rf, $ctx$) {
+          },
+          animations: []
+        });
+      `;
+
+      const result = compile(files, angularFiles);
+      expectEmit(result.source, template, 'Incorrect template');
+    });
+  });
+
   describe('[style] and [style.prop]', () => {
     it('should create style instructions on the element', () => {
       const files = {