fix(compiler-cli): Support resolve animation name from the DTS (angul…

…ar#45107)

Before this, the compiler resolves the value in the DTS as dynamic.
If the `trigger` is imported from `@angular/animations`, this PR will
use FFR to simulate the actual implementation in JS and extracts the
animation name.

PR Close angular#45107

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

@@ -35,7 +35,7 @@ import {ComponentAnalysisData, ComponentResolutionData} from './metadata';
 import {_extractTemplateStyleUrls, extractComponentStyleUrls, extractStyleResources, extractTemplate, makeResourceNotFoundError, ParsedTemplateWithSource, parseTemplateDeclaration, preloadAndParseTemplate, ResourceTypeForDiagnostics, StyleUrlMeta, transformDecoratorToInlineResources} from './resources';
 import {scopeTemplate} from './scope';
 import {ComponentSymbol} from './symbol';
-import {collectAnimationNames, validateAndFlattenComponentImports} from './util';
+import {animationTriggerResolver, collectAnimationNames, validateAndFlattenComponentImports} from './util';
 
 const EMPTY_MAP = new Map<string, Expression>();
 const EMPTY_ARRAY: any[] = [];
@@ -210,8 +210,10 @@ export class ComponentDecoratorHandler implements
     let animations: Expression|null = null;
     let animationTriggerNames: AnimationTriggerNames|null = null;
     if (component.has('animations')) {
-      animations = new WrappedNodeExpr(component.get('animations')!);
-      const animationsValue = this.evaluator.evaluate(component.get('animations')!);
+      const animationExpression = component.get('animations')!;
+      animations = new WrappedNodeExpr(animationExpression);
+      const animationsValue =
+          this.evaluator.evaluate(animationExpression, animationTriggerResolver);
       animationTriggerNames = {includesDynamicAnimations: false, staticTriggerNames: []};
       collectAnimationNames(animationsValue, animationTriggerNames);
     }

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

@@ -10,7 +10,7 @@ import {AnimationTriggerNames} from '@angular/compiler';
 import ts from 'typescript';
 
 import {Reference} from '../../../imports';
-import {ResolvedValue} from '../../../partial_evaluator';
+import {ForeignFunctionResolver, ResolvedValue} from '../../../partial_evaluator';
 import {ClassDeclaration, isNamedClassDeclaration} from '../../../reflection';
 import {createValueHasWrongTypeError} from '../../common';
 
@@ -38,6 +38,28 @@ export function collectAnimationNames(
   }
 }
 
+export function isAngularAnimationsReference(reference: Reference, symbolName: string): boolean {
+  return reference.ownedByModuleGuess === '@angular/animations' &&
+      reference.debugName === symbolName;
+}
+
+export const animationTriggerResolver: ForeignFunctionResolver = (ref, args) => {
+  const animationTriggerMethodName = 'trigger';
+  if (!isAngularAnimationsReference(ref, animationTriggerMethodName)) {
+    return null;
+  }
+  const triggerNameExpression = args[0];
+  if (!triggerNameExpression) {
+    return null;
+  }
+  const factory = ts.factory;
+  return factory.createObjectLiteralExpression(
+      [
+        factory.createPropertyAssignment(factory.createIdentifier('name'), triggerNameExpression),
+      ],
+      true);
+};
+
 export function validateAndFlattenComponentImports(imports: ResolvedValue, expr: ts.Expression): {
   imports: Reference<ClassDeclaration>[],
   diagnostics: ts.Diagnostic[],