3

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?

tatsu
  • 2,316
  • 7
  • 43
  • 87
  • Try to move the router.animations file in the src folder instead of the assets folder. – Ploppy Feb 15 '18 at 14:45
  • that did no good :( – tatsu Feb 15 '18 at 15:24
  • @Ploppy any other ideas? I also made sure I compiled to es5 and es6 – tatsu Feb 23 '18 at 13:38
  • 1
    First of all the .ts files have to be in the src folder. Assets folder is limited to static files that are not used by the compiler. If it does not fix the problem, I would recommend you to open your project in Visual Studio Code and install the Angular Language Service for full template type check. It may show the error you are getting. – Ploppy Feb 23 '18 at 14:09
  • ok. I the file is within sub-dirs of the src folder now. What I found is that with `--aot=false` the error did not appear. I suspected this might work because I kept finding bits and pieces about `aot` not supporting lambdas as opposed to `jit`. I'm not satisfied with this answer because I would like to both preserve my browser animations and work using aot. I'm going to mark myself as answer regardless until someone comes up with something better. – tatsu Feb 26 '18 at 09:56
  • 1
    I'm using animations with lambdas and aot enabled. I'm quite confused. Please try to open your project in VSC, and install the extension, it will show aot errors. – Ploppy Feb 26 '18 at 12:36
  • okay. but since I'm in a company I have to ask the sysadmins allow it's installation. They may not confirm the legitimacy of my demand and either way it'll take some time. I'll get back to this question when my sysadmins reply positively to my mail :S – tatsu Feb 26 '18 at 13:50
  • do you see which lambda I'm referring to? the const which receives basically the return of the function call. – tatsu Feb 26 '18 at 13:51
  • `const query = (s,a,o={optional:true})=>q(s,a,o);` – tatsu Feb 26 '18 at 14:53
  • What is the purpose of this line? To make all queries optional? – Ploppy Feb 26 '18 at 15:01
  • I think. I don't get it but I've tired to remove it from the animation with different workarounds without success. – tatsu Feb 27 '18 at 09:11
  • 1
    You can make all queries optional one by one, by doing like so `query(':leave', [ ... ], { optional: true }),` this way, you won't have any lambda fn and it should compile AOT, aot is really important, it's the way to go. – Ploppy Feb 27 '18 at 11:36
  • you utter genius!! if you wish you may draft up a quick answer and I'll mark you, i've since tested es5, es6 and esNext compilation. Is AOT default in angular 5.2.3 ? – tatsu Feb 27 '18 at 13:05
  • 1
    It is in build mode, not in serve mode, but will be in the future. You can already force it in serve mode by adding the `--aot` flag. Also, I added an answer. – Ploppy Feb 27 '18 at 13:26

1 Answers1

4

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.

Ploppy
  • 14,810
  • 6
  • 41
  • 58