Я пытаюсь добавить анимацию на свою страницу. Анимация работает отлично, и я могу запустить ее на локальном хосте, однако, когда я пытаюсь выполнить сборку для производства, появляется следующая ошибка.
Ошибка
ERROR in src/app/services/route-animations.ts(26,15): Error during template compile of 'ɵ0'
Function expressions are not supported in decorators
Consider changing the function expression into an exported function.
Код:
route-animation.ts
import {trigger, stagger, animate, style, group, query as q, transition, keyframes} from '@angular/animations';
const query = (s,a,o={optional:true})=>q(s,a,o);
export const homeTransition = trigger('homeTransition', [
transition(':enter', [
query('.pg-container', style({ opacity: 0 })),
query('.pg-container', stagger(300, [
style({ transform: 'translateY(100px)' }),
animate('1s cubic-bezier(.75,-0.48,.26,1.52)', style({transform: 'translateY(0px)', opacity: 1})),
])),
]),
transition(':leave', [
query('.pg-container', stagger(300, [
style({ transform: 'translateY(0px)', opacity: 1 }),
animate('1s cubic-bezier(.75,-0.48,.26,1.52)', style({transform: 'translateY(100px)', opacity: 0})),
])),
])
]);
dashboard.component.ts
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss'],
animations: [ homeTransition ],
host: {
'[@homeTransition]': ''
}
Вещи, которые я пробовал: добавлено {необязательно: true } для запроса в route-animation.ts, как было предложено в одном из ответов на аналогичные вопросы, но не дало результата.
Резюме: Angular анимация страницы отлично работает на ng serve, но выдает ошибку при сборке для prod.