Recursion not supported, resolving symbol routerAnimation

Question

I'm trying to build my Angular 4.3 application in --prod mode and I get the following error (normal build works perfectly):

    ERROR in Recursion not supported, resolving symbol routerAnimation in ..

This is how my admin.component.ts looks like:

animations: [
    trigger('routerAnimations', [
      transition('* => page1', [
        useAnimation(routerAnimation)
      ]),
      transition('* => page2, [
        useAnimation(routerAnimation)
      ]),
    ])
  ]

and my animation code:

export const routerAnimation = animation([
  query(':enter, :leave', style({ position: 'fixed', left: 0, right: 0 }), {optional: true}),
  query(':leave', style({ zIndex: 100 }), {optional: true}),
  query(':enter', style({ transform: 'translateX(-150%)' }), {optional: true}),
  group([
    query(':leave', group([
      animate('300ms cubic-bezier(.35,0,.25,1)', style({ transform: 'translateX(200%)', opacity: 0 })), // y: '-100%'
      animateChild()
    ]), {optional: true}),
    query(':enter', group([
      animate('300ms cubic-bezier(.35,0,.25,1)', style({ transform: 'translateX(0%)' })),
      animateChild()
    ]), {optional: true})
  ])
]);

After few tests, I noticed the error appears only when using the following animation code:

group([
    query(':leave', group([
      animate('300ms cubic-bezier(.35,0,.25,1)', style({ transform: 'translateX(200%)', opacity: 0 })), // y: '-100%'
      animateChild()
    ]), {optional: true}),
    query(':enter', group([
      animate('300ms cubic-bezier(.35,0,.25,1)', style({ transform: 'translateX(0%)' })),
      animateChild()
    ]), {optional: true})
  ])

Any idea what's wrong?

Answer 1

Seem like this issue with the Angular AOT compiler, Issue already opened in angular github

Someone submitted a bugfix for this yesterday, it will probably be fixed in the next Angular version.