装饰器不支持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屋!