Angular 5 ng build --prod Выражения функций не поддерживаются в декораторах

Я пытаюсь построить свой проект, который работает нормально, когда я просто запускаю его локально с 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 у меня проблема?

Источник

2 ответа

Решение

Проблема исходит от вашей лямбда-функции, как указано в ошибке.

Вы можете изменить ваши запросы один за другим, чтобы сделать их необязательными, вместо того, чтобы делать это с помощью лямбда-функции:

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

Компиляция AOT действительно важна, так как она значительно уменьшает размер вашего приложения и значительно повышает производительность.

Источник

Вместо ng b -prod использование ng b -prod -aot=false,

Джит поддерживает лямбды, аот нет. Или что-то вдоль этих линий. Я не удовлетворен этим решением, но я буду отмечать себя до тех пор, пока кто-нибудь не придет с анимациями AOT + Browser с отдельным файлом анимаций, как у меня выше. и посты, как они это сделали.

Источник
Другие вопросы по тегам