angular 5 "Выражения функций не поддерживаются в декораторах"

Question

Я с трудом собираю свой угловой проект с 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) Рассмотрите возможность изменения выражения функции в экспортируемую функцию.

Мой env

Угловой CLI: 1.7.4

Узел: 8.10.0

ОС: win32 x64

Угловая: 5.2.11

Ошибка очень похожа на эту тему, но принятый ответ не работает для меня (как вы можете видеть, я пытался поставить опционально: true для всех моих запросов). Мои вопросы: как мне "изменить выражение функции в экспортируемую функцию" в этом случае? или есть более простой способ обойти эту ошибку? извини, я довольно новичок в Angular.

Спасибо за помощь и извините за плохой английский, если что-то не хватает в моем вопросе, пожалуйста, скажите мне.

Answer 1

Не совсем уверен, но разве это не сработает?

В 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 })
      ]),
    ])
  ])
};