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

【问题标题】：Angular 5 ng build --prod Function expressions are not supported in decoratorsAngular 5 ng build --prod 装饰器不支持函数表达式
【发布时间】：2018-07-26 08:43:58
【问题描述】：

我正在尝试构建我的项目，当我使用 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 是我遇到的问题吗？

【问题讨论】：

尝试将 router.animations 文件移动到 src 文件夹而不是 assets 文件夹中。
首先，.ts 文件必须在 src 文件夹中。 Assets 文件夹仅限于编译器不使用的静态文件。如果它不能解决问题，我建议您在 Visual Studio Code 中打开您的项目并安装 Angular 语言服务以进行完整的模板类型检查。它可能会显示您遇到的错误。
我正在使用启用了 lambdas 和 aot 的动画。我很困惑。请尝试在 VSC 中打开您的项目，并安装扩展程序，它会显示 aot 错误。
你可以让所有查询一个一个地成为可选的，像query(':leave', [ ... ], { optional: true }),这样，你不会有任何lambda fn，它应该编译AOT，aot真的很重要，就是这样去。
它处于构建模式，而不是服务模式，但将来会。您已经可以通过添加 --aot 标志强制它进入服务模式。另外，我添加了一个答案。

标签： angular lambda build angular-cli

【解决方案1】：

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

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

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

AOT 编译非常重要，因为它极大地减小了应用程序的大小并大大提高了性能。

【讨论】：