Variables in animation metadata fails to interpolate using compiler AOT.

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

[ x] bug report => search github for a similar issue or PR before submitting
[ x] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Minimal reproduction of the problem with instructions

Something, like:

export CardStates {
static in:string = "in"
static out:string = "out"
}

@Component({
...
animations: [
  trigger('frontState', [
      state(CardStates.in, style({
        transform: 'rotateY(0deg)'
      }))
   ])
]
})

Fails with the following error:

TypeError: stateMetadata.stateNameExpr.split is not a function
    at _parseAnimationDeclarationStates (/home/jordi/Documents/lupa/node_modules/@angular/compiler/bundles/compiler.umd.js:9688:48)
    at /home/jordi/Documents/lupa/node_modules/@angular/compiler/bundles/compiler.umd.js:9640:15

Expected behavior

I’m not sure if it is a expected behaviour but in this case, I think it should fail, with a more descriptive message… For debugging the error, i have had to start tracing at compiler.umd.js. (It’s still not clear for me where is the line on what can I use when I try to compile with AOT) Also, I can’t understand why I can’t use functions on metadata… (Perhaps is related to this, but it’s not clear for me)

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

ng-cli

• Angular version: 2.0.X

angular 2.0.1

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: TypeScript 2.0.2

• Node (for AoT issues): node --version = 6.7.0

[benelliott]

@matsko More generally, is there any way to build a set of reusable animations that will still compile through AOT?

With JIT I was simply exporting a bunch of AnimationEntryMetadata objects and referencing them through my component decorator, e.g. animations: [Animations.EXPAND_WIDTH].

This doesn’t work in AOT, as animations’ state metadata are not generated correctly. I don’t want to re-declare the animation in every component decorator as they’re about 6 lines each and always the same.

[jordic]

@zoechi Can you point me on a plunker example that uses the aot? And I will write one.

It’s not a function, it’s a variable. Also, in this case, I think the compiler should complain… All I’ve got is a split error.