angular 5 “Function expressions are not supported in decorators”

Question

I'm having a hard time compiling my angular project with ng build --prod

the problem comes in the component 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() {
  }
}

as you can see, it calls index.animations (in the same folder)

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

This works great when I test with ng serve, but I have the following error while copmiling with "build --prod"

ERROR in app\\index\\index.component.ts(8,17): Error during template compile of 'IndexComponent' Function expressions are not supported in decorators in 'indexTransition' 'indexTransition' references 'ɵ0' 'ɵ0' contains the error at app\\index\\index.animations.ts(2,15) Consider changing the function expression into an exported function.

My env

Angular CLI: 1.7.4

Node: 8.10.0

OS: win32 x64

Angular: 5.2.11

The error is very similar to this topic but the accetpted answer does not work for me (as you can see I tried to put optional:true on all my queries). My questions are : how am I supposed to "change the function expression into an exported function" in this case ? or is there an easier method to bypass this error ? sorry i'm pretty new to Angular.

Thanks for help and sorry for bad english, if something is missing in my question, please tell me.

Answer 1

Not entirely sure, but wouldn't this work?

In index.componenent.ts

    animations: [
    Animations.indexTransition
    ]

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