Solvedangular Cannot use string enum values into animation functions with prod flag enabled

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see
[ ] Other... Please describe:

Current behavior

I've created an animation with multiple states.
States have been saved into a string enum object.

If I use the enum into the animations decorator property functions (state and transition in this case) without --prod flag everything works fine.

When I try to compile it for production environment, the app breaks and this error is fired.

TypeError: Cannot read property 'toString' of null
    at main.548e98b8c7d2ad1cacd5.js:1
    at Array.forEach (<anonymous>)
    at t.visitTrigger (main.548e98b8c7d2ad1cacd5.js:1)
    at Mp (main.548e98b8c7d2ad1cacd5.js:1)
    at (main.548e98b8c7d2ad1cacd5.js:1)
    at Up (main.548e98b8c7d2ad1cacd5.js:1)
    at e.t.registerTrigger (main.548e98b8c7d2ad1cacd5.js:1)
    at main.548e98b8c7d2ad1cacd5.js:1
    at Array.forEach (<anonymous>)
    at t.createRenderer (main.548e98b8c7d2ad1cacd5.js:1)

If I change the enum values with their corresponding literal values everything works as expected.
If I use const enum, which should substitute every occurrence of the enum values at compile time as stated in TypeScript docs, the error persists.

Expected behavior

That everything works fine using enums, even using AOT compilation.

Minimal reproduction of the problem with instructions

State enum example

enum States {
  StateOne = 'STATE_ONE',
  StateTwo = 'STATE_TWO',

Example of usage (here I use template strings but the problem is present even with the more basic States.StateOne + ' => ' + States.StateTwo)

  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.scss' ],
  animations: [
    trigger('prettyFade', [
      state(States.StateOne, style({ opacity: 0 })),
      state(States.StateTwo, style({ opacity: 1 })),
      transition(`${States.StateOne} => ${States.StateTwo}`, animate('12s')),
      transition(`${States.StateTwo} => ${States.StateOne}`, animate('1.3s')),


Angular version: 6.0.2
Typescript version: 2.8.3 (but the error persists also using 2.7.2)
13 Answers

✔️Accepted Answer


If you add export to the enum
Like this

export enum AnimationState {}

It'll work like a charm.

cc. @matsko

Other Answers:

I just wasted 1 hour of debugging to find this. What's the reason behind the export keyword?
I think there should be a more straightforward error message.

More Issues: