部署Angular应用到Heroku时遇装饰器不支持函数表达式错误

嘿，这个问题我之前帮同事踩过坑！本质是Angular的AOT编译（Heroku部署时默认会启用）不允许在装饰器里使用匿名函数表达式，你的listAnimation动画里刚好有这么个匿名函数（就是报错里的ɵ0），导致编译失败。

问题根源 #

Angular的AOT编译器需要静态分析代码来提前编译组件，而匿名函数没法被静态识别和处理，所以会抛出这个错误。报错里提到的ɵ0其实是Angular编译器给匿名函数自动生成的标识符。

解决方案：把匿名函数改成导出的命名函数 #

按照下面的步骤修改你的动画代码：

1. 重构动画里的匿名函数为命名函数
   打开login.animation.ts，找到动画中使用匿名函数的地方（对应报错的第5行），把它改成一个导出的命名函数。

   错误示例（你现在的代码大概是这样）：

   import { trigger, transition, style, animate, query } from '@angular/animations';
   
   export const listAnimation = trigger('listAnimation', [
     transition('* => *', function() { // 这里的匿名函数就是问题所在
       return [
         query(':enter', [
           style({ opacity: 0 }),
           animate('300ms', style({ opacity: 1 }))
         ], { optional: true }),
         query(':leave', [
           animate('300ms', style({ opacity: 0 }))
         ], { optional: true })
       ];
     })
   ]);
   

   修改后的正确代码：

   import { trigger, transition, style, animate, query, AnimationTransitionMetadata } from '@angular/animations';
   
   // 导出一个命名函数，替代原来的匿名函数
   export function listAnimationTransition(): AnimationTransitionMetadata[] {
     return [
       query(':enter', [
         style({ opacity: 0 }),
         animate('300ms', style({ opacity: 1 }))
       ], { optional: true }),
       query(':leave', [
         animate('300ms', style({ opacity: 0 }))
       ], { optional: true })
     ];
   }
   
   export const listAnimation = trigger('listAnimation', [
     transition('* => *', listAnimationTransition) // 引用这个命名函数
   ]);
   

2. 保持组件中的引用不变
   在login.component.ts里，你还是可以正常引用listAnimation，不需要修改：

   import { Component } from '@angular/core';
   import { listAnimation } from './login.animation';
   
   @Component({
     selector: 'app-login',
     templateUrl: './login.component.html',
     styleUrls: ['./login.component.css'],
     animations: [listAnimation]
   })
   export class LoginComponent {
     // 你的组件逻辑
   }
   

3. 重新部署到Heroku
   提交修改后重新推送：

   git add .
   git commit -m "Fix AOT animation function expression error for Heroku deployment"
   git push heroku master
   

这样修改后，AOT编译器就能正确识别动画中的函数，编译错误应该就会消失啦。

内容的提问来源于stack exchange，提问作者Stefan Falk