angular 5 "Function expressions are not supported in decorators"
angular 5 "Function expressions are not supported in decorators"
我很难编译我的 angular 项目
ng build --prod
问题出在组件 IndexComponent 中:
index.componenent.ts
import { Component, OnInit } from '@angular/core';
import { indexTransition } from './index.animations';
@Component({
selector: 'app-index',
templateUrl: './index.component.html',
styleUrls: ['./index.component.scss'],
animations: [ indexTransition ],
host: {
'[@indexTransition]': ''
}
})
export class IndexComponent implements OnInit {
constructor() {
}
ngOnInit() {
}
}
如您所见,它调用 index.animations(在同一文件夹中)
index.animations.ts
import { sequence, trigger, stagger, animate, style, group, query as q, transition, keyframes, animateChild } from '@angular/animations';
const query = (s,a,o={optional:true})=>q(s,a,o);
export const indexTransition = trigger('indexTransition', [
transition(':enter', [
query('.iw-path', [
style({'stroke': '#000'})
], { optional: true }),
group([
query('.iw-path--w', [
style({'stroke-dashoffset': '100'}),
animate('3.5s cubic-bezier(.1,.15,.18,1)', style({'stroke-dashoffset': '0'})),
], { optional: true }),
query('.iw-path--basic', [
style({'stroke-dashoffset': '50'}),
animate('3.5s cubic-bezier(.1,.15,.18,1)', style({'stroke-dashoffset': '0'})),
], { optional: true }),
query('.iw-path', [
style({'stroke': '#000'}),
animate('.5s 2s', style({'stroke': '#e01f1f'})),
], { optional: true })
]),
]),
transition(':leave', [
group([
query('.iw-path--w', [
style({'stroke-dashoffset': '0'}),
animate('.5s cubic-bezier(.1,.15,.18,1)', style({'stroke-dashoffset': '100'})),
], { optional: true }),
query('.iw-path--basic', [
style({'stroke-dashoffset': '0'}),
animate('.5s cubic-bezier(.1,.15,.18,1)', style({'stroke-dashoffset': '50'})),
], { optional: true })
]),
])
]);
这在我使用 ng serve 进行测试时效果很好,但是在使用 "build --prod"
进行复制时出现以下错误
app\index\index.component.ts(8,17) 中的错误:'IndexComponent' 的模板编译期间出错
'indexTransition' 中的装饰器不支持函数表达式
'indexTransition' 引用 'ɵ0'
'ɵ0' 包含 app\index\index.animations.ts(2,15) 处的错误
考虑将函数表达式更改为导出函数。
我的环境
Angular CLI:1.7.4
节点:8.10.0
OS: win32 x64
Angular: 5.2.11
该错误与 非常相似,但接受的答案对我不起作用(如您所见,我试图在所有查询中添加 optional:true)。
我的问题是:在这种情况下我应该如何 "change the function expression into an exported function"?还是有更简单的方法来绕过这个错误?抱歉,我是 Angular.
的新手
感谢您的帮助,抱歉英语不好,如果我的问题中缺少某些内容,请告诉我。
不太确定,但这行不通吗?
在index.componenent.ts
animations: [
Animations.indexTransition
]
在index.animations.ts
export const Animations = {
indexTransition: trigger('indexTransition', [
transition(':enter', [
q('.iw-path', [
style({'stroke': '#000'})
], { optional: true }),
group([
q('.iw-path--w', [
style({'stroke-dashoffset': '100'}),
animate('3.5s cubic-bezier(.1,.15,.18,1)', style({'stroke-dashoffset': '0'})),
], { optional: true }),
q('.iw-path--basic', [
style({'stroke-dashoffset': '50'}),
animate('3.5s cubic-bezier(.1,.15,.18,1)', style({'stroke-dashoffset': '0'})),
], { optional: true }),
q('.iw-path', [
style({'stroke': '#000'}),
animate('.5s 2s', style({'stroke': '#e01f1f'})),
], { optional: true })
]),
]),
transition(':leave', [
group([
q('.iw-path--w', [
style({'stroke-dashoffset': '0'}),
animate('.5s cubic-bezier(.1,.15,.18,1)', style({'stroke-dashoffset': '100'})),
], { optional: true }),
q('.iw-path--basic', [
style({'stroke-dashoffset': '0'}),
animate('.5s cubic-bezier(.1,.15,.18,1)', style({'stroke-dashoffset': '50'})),
], { optional: true })
]),
])
])
};
我很难编译我的 angular 项目
ng build --prod
问题出在组件 IndexComponent 中:
index.componenent.ts
import { Component, OnInit } from '@angular/core';
import { indexTransition } from './index.animations';
@Component({
selector: 'app-index',
templateUrl: './index.component.html',
styleUrls: ['./index.component.scss'],
animations: [ indexTransition ],
host: {
'[@indexTransition]': ''
}
})
export class IndexComponent implements OnInit {
constructor() {
}
ngOnInit() {
}
}
如您所见,它调用 index.animations(在同一文件夹中)
index.animations.ts
import { sequence, trigger, stagger, animate, style, group, query as q, transition, keyframes, animateChild } from '@angular/animations';
const query = (s,a,o={optional:true})=>q(s,a,o);
export const indexTransition = trigger('indexTransition', [
transition(':enter', [
query('.iw-path', [
style({'stroke': '#000'})
], { optional: true }),
group([
query('.iw-path--w', [
style({'stroke-dashoffset': '100'}),
animate('3.5s cubic-bezier(.1,.15,.18,1)', style({'stroke-dashoffset': '0'})),
], { optional: true }),
query('.iw-path--basic', [
style({'stroke-dashoffset': '50'}),
animate('3.5s cubic-bezier(.1,.15,.18,1)', style({'stroke-dashoffset': '0'})),
], { optional: true }),
query('.iw-path', [
style({'stroke': '#000'}),
animate('.5s 2s', style({'stroke': '#e01f1f'})),
], { optional: true })
]),
]),
transition(':leave', [
group([
query('.iw-path--w', [
style({'stroke-dashoffset': '0'}),
animate('.5s cubic-bezier(.1,.15,.18,1)', style({'stroke-dashoffset': '100'})),
], { optional: true }),
query('.iw-path--basic', [
style({'stroke-dashoffset': '0'}),
animate('.5s cubic-bezier(.1,.15,.18,1)', style({'stroke-dashoffset': '50'})),
], { optional: true })
]),
])
]);
这在我使用 ng serve 进行测试时效果很好,但是在使用 "build --prod"
进行复制时出现以下错误app\index\index.component.ts(8,17) 中的错误:'IndexComponent' 的模板编译期间出错 'indexTransition' 中的装饰器不支持函数表达式 'indexTransition' 引用 'ɵ0' 'ɵ0' 包含 app\index\index.animations.ts(2,15) 处的错误 考虑将函数表达式更改为导出函数。
我的环境
Angular CLI:1.7.4
节点:8.10.0
OS: win32 x64
Angular: 5.2.11
该错误与
感谢您的帮助,抱歉英语不好,如果我的问题中缺少某些内容,请告诉我。
不太确定,但这行不通吗?
在index.componenent.ts
animations: [
Animations.indexTransition
]
在index.animations.ts
export const Animations = {
indexTransition: trigger('indexTransition', [
transition(':enter', [
q('.iw-path', [
style({'stroke': '#000'})
], { optional: true }),
group([
q('.iw-path--w', [
style({'stroke-dashoffset': '100'}),
animate('3.5s cubic-bezier(.1,.15,.18,1)', style({'stroke-dashoffset': '0'})),
], { optional: true }),
q('.iw-path--basic', [
style({'stroke-dashoffset': '50'}),
animate('3.5s cubic-bezier(.1,.15,.18,1)', style({'stroke-dashoffset': '0'})),
], { optional: true }),
q('.iw-path', [
style({'stroke': '#000'}),
animate('.5s 2s', style({'stroke': '#e01f1f'})),
], { optional: true })
]),
]),
transition(':leave', [
group([
q('.iw-path--w', [
style({'stroke-dashoffset': '0'}),
animate('.5s cubic-bezier(.1,.15,.18,1)', style({'stroke-dashoffset': '100'})),
], { optional: true }),
q('.iw-path--basic', [
style({'stroke-dashoffset': '0'}),
animate('.5s cubic-bezier(.1,.15,.18,1)', style({'stroke-dashoffset': '50'})),
], { optional: true })
]),
])
])
};