Function calls are not supported in decorators but 'Animations' was called

Question

I have an Animation class given below:

import { trigger, state, style, transition, animate } from '@angular/animations';
export class Animations {
constructor() {}
animate = animate('.5s cubic-bezier(0.68, -0.55, 0.265, 1.55)');
side() {
 return trigger(`visibilityAnimation`, [
    state('false', style({
       transform: '{{ side }}',
       display: 'none'
    }), { params: { side: 'translateX(100%)' } }),
    state('true', style({
       transform: 'translateX(0)',
       display: 'block'
    })),
    transition('false <=> true', this.animate),
  ]);
}

top() {.....}

chooseAnimation() {....}

background() {....}
}

In one of my components I'm using as follows:

import { Animations } from './animations';

const animations = new Animations();

@Component({
 selector: 'app-nav-user',
 templateUrl: './nav-user.component.html',
 styleUrls: ['./nav-user.component.scss'],
 animations: [
    animations.chooseAnimation(),
    animations.background()
  ]
})

When I use ng build --prod --aot --output-hashing=all, I get the above error.

Note: I'm using angular cli v7.

score 0 · Answer 1 · answered Sep 13 '19 at 17:11

I had a similar situation happen to me while trying to code parameterized animations. Writing a function that returns the animation object is the intuitive thing to do, and after the error you would think storing the return in a constant and passing that to the decorator would work, but it doesn't with AOT. The reason has to do with the ordem of the compilation, so to speak. The AOT compiler will resolve metadata first, and it wont deal with function calls at all, so even if you try to resolve it outside of the decorator, it's all the same.

So what you should do is export the trigger(...) object as a constant and use the animation option params to do all necessary configurations, like you did with the side parameter in your example.

I can't really help you with much more, as you didn't share the part of the code actually triggering the error, the chooseAnimation method, but you should be able to get the idea behind it, as you already know how to use the options.

score 0 · Answer 2 · answered Jan 29 '20 at 11:07

I had the same problem, so I'm just expanding on the answer by @Henrique Erzinger, which helped me solve it.

All you need to do is make sure there are no user-defined parameters in an animation function - in other words, all the parameters are (so to say) hardcoded.

Your function fadeIn, for example, can be called from the decorator by using animations: [fadeIn()] in the decorator, but the function definition itself cannot take any parameters.

// this WILL work
export function fadeIn(): AnimationTriggerMetadata {
  return trigger('fadeIn', [
    transition(':enter', [
      // only static code, no variables allowed ...
    ])
  ]);
}

// this will NOT work
export function fadeIn(time = 300): AnimationTriggerMetadata {
  return trigger('fadeIn', [
    transition(':enter', [
      group([
        animate(time + 'ms' .... // NOT allowed
    ])
  ]);
}

Function calls are not supported in decorators but 'Animations' was called

2 Answers2