angular: AoT "function calls are not supported" error with exported animation function

Honestly it is ridiculous to me that this is even a problem. But then again that is why I switched to Vue.

So based on further testing it seems the things that are problematic are:

1. Back tick string interpolation, like `rotate(${value}deg)`. Concatenation works however.
2. Any internal var, const or let in the function. Instead it must be extracted from the function and exported. Surprisingly, you can pass values as parameters and they can have defaults.

These limitations seem both severe and inconsistent. Now that I’ve at least narrowed them down can someone from the Angular team chime in and let me know if they are: intentional and by design, short-term limitations that the team expects to overcome, or just simply bugs?

An additional problem I’ve noted, is that ng server -aot does not always seem to pick up changes when I’m testing these things and it often has to be restarted to compile properly again.

@chrisnicola the issue is that the function isn’t being called by code, it’s being called as part of metadata, which looks like code but isn’t. Metadata needs to be fully resolved at compile time, not runtime.

If you actually want to execute code at runtime to produce a value to satisfy a provider, use useFactory:

providers: [
  {provide: ROUTES, useFactory: () => computeRoutesAtRuntime()}
]

@alxhub sadly I think this just demonstrates that Angular’s AoT strategy isn’t a particularly good one.

The fact that code that is completely valid to the Typescript compiler doesn’t work with the AoT compiler seems like a pretty big limitation.

So sad to see that this problem is not yet solved, even with Angular 4.2 animations, which are focused on making animations more reusable

@jaesung2061 probably not the place for this discussion, but it’s been pretty great. It is somewhat familiar if you have experience with Angular 1.x. Sadly Vue feels like what Angular 2 should have been instead of this over designed attempt to make a javascript framework look more like a Java enterprise project.

@jiayihu, most of these are fine - the compiler can understand functions which immediately return a statically analyzable value, and invocations of those functions with statically analyzable (“foldable”) arguments.

Where the code you linked gets into trouble is with the bounceInDirection / bounceOutDirection functions, which contain logic that violates the above rule (must return immediately). You might be able to rewrite them to be foldable. Inline conditionals (a ? b : c) are okay. For example, here’s bounceOutDirection('x'):

function bounceOutDirectionX(params: Object) {
  return animation(
    animate(
      '{{ timing }}s {{ delay }}s',
      keyframes([
        style({ transform: translate3d('a'), offset: 0.2 }),
        style({ opacity: 1, transform: translate3d('b'), offset: 0.4 }),
        style({ opacity: 1, transform: translate3d('c'), offset: 0.45 }),
        style({ opacity: 0, transform: translate3d('d'), offset: 1 }),
      ])
    ),
    { params: {timing: DEFAULT_TIMING, delay: 0, ...params } }
  );
}

then this is legal:

const bounceOutLeft = bounceOutDirectionX({a: '20px', b: '-200px'});