Angular animation error - Reduce of empty array with no initial value

Question

When adding animation to a component I get the following error in the console:

Reduce of empty array with no initial value

My Angular Version: 2.0.0

The animation code:

animations: [
    trigger('routerTransition', [
        state('void', style({ position: 'fixed', width: '100%' })),
        state('*', style({ position: 'fixed', width: '100%' })),
        transition(':enter', [
            style({ transform: 'translateX(100%)' }),
            animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
        ]),
        transition(':leave', [
            style({ transform: 'translateX(0%)' }),
            animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' }))
        ])
    ])
]

The error:

Answer 1

It turns out that I was using the new animation aliases introduced in Angular version 2.1.0, I was following this example I did not realize my Angular version was not the same as in the example.

After digging through the call-stack I found that the actual error was:

the provided :enter is not of a supported format

It would have been helpful if this error was logged in the console.

Upgrading to Angular 2.1.0 resolved the error.

Extract from the release notes:

Animation in Angular has been enhanced by adding :enter and :leave aliases for the common void => * and * => void state changes. The transition API documentation has been updated with these aliases.