装饰器不支持 Angular 5 ng build --prod 函数表达式

Question

我正在尝试构建我的项目，当我只是使用 ng serve 在本地运行它时，它运行良好。

但是在 ng b -prod 上我得到:

 ERROR in app\logged-in\content\routing\routing.component.ts(9,16): Error during template compile of 'RoutingComponent'
[ERROR]   Function expressions are not supported in decorators in 'slideLeft'
[ERROR]     'slideLeft' references 'ɵ0'
[ERROR]       'ɵ0' contains the error at assets\animations\router.animations.ts(2,15)
[ERROR]         Consider changing the function expression into an exported function.

这是正在加载的文件:

import {sequence, trigger, animate, style, group, query as q, transition, animateChild} from '@angular/animations';
const query = (s,a,o={optional:true})=>q(s,a,o);

export const slideLeft = trigger('slideLeft', [
  transition('* => *', [
    query(':enter, :leave', style({ position: 'fixed', width:'100%' })),
    query(':enter', style({ transform: 'translateX(100%)' })),
    sequence([
      query(':leave', animateChild()),
      group([
        query(':leave', [
          style({ transform: 'translateX(0%)' }),
          animate('1s cubic-bezier(.86,.01,.27,1)',
            style({ transform: 'translateX(-100%)' }))
        ]),
        query(':enter', [
          style({ transform: 'translateX(100%)' }),
          animate('1s cubic-bezier(.86,.01,.27,1)',
            style({ transform: 'translateX(0%)' })),
        ]),
      ]),
      query(':enter', animateChild()),
    ])
  ])
]);

这是加载它的组件:

import {Component, OnInit} from '@angular/core';
import {slideLeft} from '../../../../assets/animations/router.animations';
import {Router} from '@angular/router';

@Component({
  selector: 'app-routing',
  templateUrl: './routing.component.html',
  styleUrls: ['./routing.component.scss'],
  animations: [slideLeft]
})
export class RoutingComponent implements OnInit {

  router:Router;

  constructor() {}

  ngOnInit() {}

  getState(outlet) {
    return outlet.activatedRouteData.state;
  }

}

这是怎么回事？

我发现了这个问题:https://github.com/angular/angular/issues/10789这是我遇到的问题吗？

Answer 1

问题来自错误中所述的 lambda 函数。

您可以将您的查询一一更改为可选的，而不是使用 lambda 函数:

query(':leave', [ ... ], { optional: true }),

AOT 编译非常重要，因为它可以显着减小应用的大小并显着提高性能。