diff --git a/packages/compiler-cli/src/ngtsc/annotations/src/component.ts b/packages/compiler-cli/src/ngtsc/annotations/src/component.ts
index 2ea9bb325c..293b72fba4 100644
--- a/packages/compiler-cli/src/ngtsc/annotations/src/component.ts
+++ b/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 =
-          (staticallyResolve(component.get('animations') !, this.reflector, this.checker) as any |
-           null[]);
-      animations = animations ? animations.map(entry => convertMapToStringMap(entry)) : null;
+      animations = new WrappedNodeExpr(component.get('animations') !);
     }
 
     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;
-}
diff --git a/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts b/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts
index 491488e059..7557727261 100644
--- a/packages/compiler-cli/test/compliance/r3_view_compiler_styling_spec.ts
+++ b/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'}]
         });
       `;
 
diff --git a/packages/compiler/src/render3/view/api.ts b/packages/compiler/src/render3/view/api.ts
index c0f554efc6..44265e2b2d 100644
--- a/packages/compiler/src/render3/view/api.ts
+++ b/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;
 }
 
 /**
diff --git a/packages/compiler/src/render3/view/compiler.ts b/packages/compiler/src/render3/view/compiler.ts
index cba03fbc32..e96d632aa9 100644
--- a/packages/compiler/src/render3/view/compiler.ts
+++ b/packages/compiler/src/render3/view/compiler.ts
@@ -244,9 +244,8 @@ export function compileComponentFromMetadata(
   }
 
   // e.g. `animations: [trigger('123', [])]`
-  if (meta.animations) {
-    const animationValues = meta.animations.map(entry => mapToExpression(entry));
-    definitionMap.set('animations', o.literalArr(animationValues));
+  if (meta.animations !== null) {
+    definitionMap.set('animations', meta.animations);
   }
 
   // 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);
 
diff --git a/packages/core/src/render3/jit/directive.ts b/packages/core/src/render3/jit/directive.ts
index 74d482b503..e2db667052 100644
--- a/packages/core/src/render3/jit/directive.ts
+++ b/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,
-              animations: metadata.animations || null
+              encapsulation: metadata.encapsulation || ViewEncapsulation.Emulated, animations,
             },
             constantPool, makeBindingParser());
         const preStatements = [...constantPool.statements, ...res.statements];