Using template substitution in a function silently makes it unusable in a annotation

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting

Current behavior

The following function:

export function ANIM_EXPAND_WIDTH(transitionMs: number = 200): AnimationEntryMetadata {
    return trigger('expandWidth', [
        state('void', style({
            width: 0
        })),
        state('*', style({
            width: '*'
        })),
        transition('void <=> *', animate(`${transitionMs}ms ease`))
    ]);
}

from a library causes the the error Error encountered resolving symbol values statically. Calling function 'ANIM_EXPAND_WIDTH' with no indication as why it is not be used as a macro function.

The subtle change to:

export function ANIM_EXPAND_WIDTH(transitionMs: number = 200): AnimationEntryMetadata {
    return trigger('expandWidth', [
        state('void', style({
            width: 0
        })),
        state('*', style({
            width: '*'
        })),
        transition('void <=> *', animate(transitionMs+'ms ease'))
    ]);
}

works.

Expected behavior

Either this template substitution should be supported or a clear error message about why it can’t be supported should be reported.

[JoostK]

This is no longer an issue with Ivy 😃

[fknop]

Same error happens if we use a variable inside the function for example:

const transform: string = 'translate(0, 25%)'; and use this variable to avoid retyping the css value.

Also using a switch will not work:

export function fadeSlide (direction: string = 'down', duration: number = 0.2): AnimationEntryMetadata {

  let transform: string;

  switch (direction) {
    case 'up':    transform = 'translate(0, 25%)'; break;
    case 'down':  transform = 'translate(0, -25%)'; break;
    case 'left':  transform = 'translate(25%, 0)'; break;
    case 'right': transform = 'translate(-25%, 0)'; break;
    default: throw new Error('Unknown direction ' + direction + ' for slide animation');
  }

  return trigger('fadeSlide', [
    transition(':enter', [
      style({
        opacity: 0,
        transform: transform
      }),
      animate(duration + 's ease-in-out')
    ]),
    transition(':leave', [
      animate(duration + 's ease-in-out', style({
        opacity: 0,
        transform: transform
      }))
    ])
  ]);
}

I feel like it should work. The parameters passed inside the function should be enough to resolve the value of the variable.