Angular Router Animations - ошибка с компиляцией - вызовы функций не поддерживаются в декораторах

Question

У меня небольшой проект, и я хотел реализовать угловую анимацию для маршрутизации, но у меня есть ошибка при компиляции (ng build --prod), вот все коды, на которые я влияю: -App компонент

import { Component } from '@angular/core';
import { FirestoreService } from './services/firestore.service';
import { RouterOutlet } from '@angular/router';
import { slider } from './route-animations';
@Component({
	selector: 'app-root',
	animations: [ slider ],
	templateUrl: './app.component.html',
	styleUrls: [ './app.component.css' ]
})
export class AppComponent {
	constructor(public _af: FirestoreService) {}
	prepareRoute(outlet: RouterOutlet) {
		return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
	}
}

анимация маршрута:

import { trigger, transition, style, query, group, animateChild, animate, keyframes } from '@angular/animations';

// Basic

export const fader = trigger('routeAnimations', [
	transition('* <=> *', [
		query(
			':enter, :leave',
			[
				style({
					position: 'absolute',
					left: 0,
					width: '100%',
					opacity: 0,
					transform: 'scale(0) translateY(100%)'
				})
			],
			{ optional: true }
		),
		query(':enter', [ animate('600ms ease', style({ opacity: 1, transform: 'scale(1) translateY(0)' })) ], {
			optional: true
		})
	])
]);

// Positioned

export const slider = trigger('routeAnimations', [
	transition('* => isLeft', slideTo('left')),
	transition('* => isRight', slideTo('right')),
	transition('isRight => *', slideTo('left')),
	transition('isLeft => *', slideTo('right'))
]);

export const transformer = trigger('routeAnimations', [
	transition('* => isLeft', translateTo({ x: -100, y: -100, rotate: -720 })),
	transition('* => isRight', translateTo({ x: 100, y: -100, rotate: 90 })),
	transition('isRight => *', translateTo({ x: -100, y: -100, rotate: 360 })),
	transition('isLeft => *', translateTo({ x: 100, y: -100, rotate: -360 }))
]);
function slideTo(direction) {
	const optional = { optional: true };
	return [
		query(
			':enter, :leave',
			[
				style({
					position: 'absolute',
					top: 0,
					[direction]: 0,
					width: '100%'
				})
			],
			optional
		),
		query(':enter', [ style({ [direction]: '-100%' }) ]),
		group([
			query(':leave', [ animate('600ms ease', style({ [direction]: '100%' })) ], optional),
			query(':enter', [ animate('600ms ease', style({ [direction]: '0%' })) ])
		])
		// Normalize the page style... Might not be necessary

		// Required only if you have child animations on the page
		// query(':leave', animateChild()),
		// query(':enter', animateChild()),
	];
}

export function translateTo({ x = 100, y = 0, rotate = 0 }) {
	const optional = { optional: true };
	return [
		query(
			':enter, :leave',
			[
				style({
					position: 'absolute',
					top: 0,
					left: 0,
					width: '100%'
				})
			],
			optional
		),
		query(':enter', [ style({ transform: `translate(${x}%, ${y}%) rotate(${rotate}deg)` }) ]),
		group([
			query(
				':leave',
				[ animate('600ms ease-out', style({ transform: `translate(${x}%, ${y}%) rotate(${rotate}deg)` })) ],
				optional
			),
			query(':enter', [ animate('600ms ease-out', style({ transform: `translate(0, 0) rotate(0)` })) ])
		])
	];
}

// Keyframes

export const stepper = trigger('routeAnimations', [
	transition('* <=> *', [
		query(':enter, :leave', [
			style({
				position: 'absolute',
				left: 0,
				width: '100%'
			})
		]),
		group([
			query(':enter', [
				animate(
					'2000ms ease',
					keyframes([
						style({ transform: 'scale(0) translateX(100%)', offset: 0 }),
						style({ transform: 'scale(0.5) translateX(25%)', offset: 0.3 }),
						style({ transform: 'scale(1) translateX(0%)', offset: 1 })
					])
				)
			]),
			query(':leave', [
				animate(
					'2000ms ease',
					keyframes([
						style({ transform: 'scale(1)', offset: 0 }),
						style({ transform: 'scale(0.5) translateX(-25%) rotate(0)', offset: 0.35 }),
						style({ opacity: 0, transform: 'translateX(-50%) rotate(-180deg) scale(6)', offset: 1 })
					])
				)
			])
		])
	])
]);

ошибка: ОШИБКА в src \ app \ app.component.ts (8,16): Ошибка во время компиляции шаблона Вызовы функций AppComponent не поддерживаются вдекораторы, но «slideTo» вызывается в «slider», «слайдер» вызывает «slideTo».

Answer 1

Проблема в том, что при создании AOT-приложения Angular он берет метаданные указанного компонента и предварительно компилирует фабрику компонентов.Теперь угловой компилятор понимает только подмножество javascript.Вам придется переписать свой код, учитывая this .

Короче говоря: slideTo нельзя использовать, поскольку он объявляет const optional = { optional: true }; перед возвратом.Вы должны просто вставить объект optional там, где это необходимо.Я не уверен насчет других функций.