fix(animations): make animations work in AOT (#14775)

modules/@angular/platform-browser/animations/src/dsl/animation_timeline_visitor.ts

@@ -278,7 +278,7 @@ export class AnimationTimelineVisitor implements AnimationDslVisitor {
     const firstKeyframe = ast.steps[0];
 
     let offsetGap = 0;
-    const containsOffsets = firstKeyframe.styles.find(styles => styles['offset'] >= 0);
+    const containsOffsets = getOffset(firstKeyframe) != null;
     if (!containsOffsets) {
       offsetGap = MAX_KEYFRAME_OFFSET / limit;
     }
@@ -291,8 +291,9 @@ export class AnimationTimelineVisitor implements AnimationDslVisitor {
 
     ast.steps.forEach((step: AnimationStyleMetadata, i: number) => {
       const normalizedStyles = normalizeStyles(step.styles);
-      const offset = containsOffsets ? <number>normalizedStyles['offset'] :
-                                       (i == limit ? MAX_KEYFRAME_OFFSET : i * offsetGap);
+      const offset = containsOffsets ?
+          (step.offset != null ? step.offset : parseFloat(normalizedStyles['offset'] as string)) :
+          (i == limit ? MAX_KEYFRAME_OFFSET : i * offsetGap);
       innerTimeline.forwardTime(offset * duration);
       innerTimeline.setStyles(normalizedStyles);
     });
@@ -424,3 +425,22 @@ export class TimelineBuilder {
     return createTimelineInstruction(finalKeyframes, this.duration, this.startTime, this.easing);
   }
 }
+
+function getOffset(ast: AnimationStyleMetadata): number {
+  let offset = ast.offset;
+  if (offset == null) {
+    const styles = ast.styles;
+    if (Array.isArray(styles)) {
+      for (let i = 0; i < styles.length; i++) {
+        const o = styles[i]['offset'] as number;
+        if (o != null) {
+          offset = o;
+          break;
+        }
+      }
+    } else {
+      offset = styles['offset'] as number;
+    }
+  }
+  return offset;
+}

modules/@angular/platform-browser/animations/src/dsl/animation_transition_factory.ts

@@ -5,7 +5,8 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {AnimationMetadata, AnimationTransitionMetadata, ɵStyleData} from '@angular/animations';
+import {AnimationMetadata, AnimationTransitionMetadata, sequence, ɵStyleData} from '@angular/animations';
+
 import {buildAnimationKeyframes} from './animation_timeline_visitor';
 import {TransitionMatcherFn} from './animation_transition_expr';
 import {AnimationTransitionInstruction, createTransitionInstruction} from './animation_transition_instruction';
@@ -17,7 +18,10 @@ export class AnimationTransitionFactory {
       private _triggerName: string, ast: AnimationTransitionMetadata,
       private matchFns: TransitionMatcherFn[],
       private _stateStyles: {[stateName: string]: ɵStyleData}) {
-    this._animationAst = ast.animation;
+    const normalizedAst = Array.isArray(ast.animation) ?
+        sequence(<AnimationMetadata[]>ast.animation) :
+        <AnimationMetadata>ast.animation;
+    this._animationAst = normalizedAst;
   }
 
   match(currentState: any, nextState: any): AnimationTransitionInstruction {

modules/@angular/platform-browser/animations/src/dsl/animation_trigger.ts

@@ -93,9 +93,23 @@ class AnimationTriggerVisitor implements AnimationDslVisitor {
     context.transitions.push(ast);
   }
 
-  visitSequence(ast: AnimationSequenceMetadata, context: any) {}
-  visitGroup(ast: AnimationGroupMetadata, context: any) {}
-  visitAnimate(ast: AnimationAnimateMetadata, context: any) {}
-  visitStyle(ast: AnimationStyleMetadata, context: any) {}
-  visitKeyframeSequence(ast: AnimationKeyframesSequenceMetadata, context: any) {}
+  visitSequence(ast: AnimationSequenceMetadata, context: any) {
+    // these values are not visited in this AST
+  }
+
+  visitGroup(ast: AnimationGroupMetadata, context: any) {
+    // these values are not visited in this AST
+  }
+
+  visitAnimate(ast: AnimationAnimateMetadata, context: any) {
+    // these values are not visited in this AST
+  }
+
+  visitStyle(ast: AnimationStyleMetadata, context: any) {
+    // these values are not visited in this AST
+  }
+
+  visitKeyframeSequence(ast: AnimationKeyframesSequenceMetadata, context: any) {
+    // these values are not visited in this AST
+  }
 }

modules/@angular/platform-browser/animations/src/dsl/animation_validator_visitor.ts

@@ -5,7 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {AnimateTimings, AnimationAnimateMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationMetadataType, AnimationSequenceMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata} from '@angular/animations';
+import {AnimateTimings, AnimationAnimateMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationMetadataType, AnimationSequenceMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata, sequence} from '@angular/animations';
 
 import {normalizeStyles, parseTimeExpression} from '../util';
 
@@ -52,7 +52,9 @@ export type StyleTimeTuple = {
  * Otherwise an error will be thrown.
  */
 export function validateAnimationSequence(ast: AnimationMetadata) {
-  return new AnimationValidatorVisitor().validate(ast);
+  const normalizedAst =
+      Array.isArray(ast) ? sequence(<AnimationMetadata[]>ast) : <AnimationMetadata>ast;
+  return new AnimationValidatorVisitor().validate(normalizedAst);
 }
 
 export class AnimationValidatorVisitor implements AnimationDslVisitor {
@@ -62,9 +64,13 @@ export class AnimationValidatorVisitor implements AnimationDslVisitor {
     return context.errors;
   }
 
-  visitState(ast: AnimationStateMetadata, context: any): any {}
+  visitState(ast: AnimationStateMetadata, context: any): any {
+    // these values are not visited in this AST
+  }
 
-  visitTransition(ast: AnimationTransitionMetadata, context: any): any {}
+  visitTransition(ast: AnimationTransitionMetadata, context: any): any {
+    // these values are not visited in this AST
+  }
 
   visitSequence(ast: AnimationSequenceMetadata, context: AnimationValidatorContext): any {
     ast.steps.forEach(step => visitAnimationNode(this, step, context));