装饰器不支持 Angular 5 ng build --prod 函数表达式 [英] Angular 5 ng build --prod Function expressions are not supported in decorators

问题描述

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

I'm trying to build my project which works fine when I'm just running it locally with 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是我遇到的问题吗?

I found this issue: https://github.com/angular/angular/issues/10789 is it the problem I'm having?

推荐答案

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

The problem comes from your lambda function as stated in the error.

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

You could change your queries one by one to be optional instead of doing it with the lambda function:

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

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

AOT compilation is really important as it dramatically reduces the size of your app and improves greatly the performances.

这篇关于装饰器不支持 Angular 5 ng build --prod 函数表达式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！