Angular 5 ng build --prod Function expressions are

I'm trying to build my project which works fine when I'm just running it locally with ng serve.

but on ng b -prod I get :

 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.

here's the file being loaded :

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

and here's the component that loads it :

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;
  }

}

what's wrong here?

I found this issue: https://github.com/angular/angular/issues/10789 is it the problem I'm having?

回答1:

The problem comes from your lambda function as stated in the error.

You could change your queries one by one to be optional instead of doing it with the lambda function:

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

AOT compilation is really important as it dramatically reduces the size of your app and improves greatly the performances.

回答2:

Instead of ng b -prod use ng b -prod -aot=false.

Jit supports lambdas Aot does not. or something along those lines. I'm not satisfied with this solution but I'll mark myself until someone comes along with AOT + Browser animations with the separate animations file as I have above. and posts how they did it.