不支持递归，解析符号 routerAnimation

Question

我试图在 --prod 模式下构建我的 Angular 4.3 应用程序，但我收到以下错误（正常构建工作完美）：

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

这是我的 admin.component.ts 的样子：

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

还有我的动画代码：

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})
  ])
]);

经过几次测试，我注意到只有在使用以下动画代码时才会出现错误：

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})
  ])

知道哪里出了问题吗？

Answer 1

似乎是 Angular AOT 编译器的问题，问题已在 angular github

中打开

昨天有人为此提交了一个错误修复，它可能会在下一个 Angular 版本中修复。

不支持递归，解析符号 routerAnimation

Recursion not supported, resolving symbol routerAnimation

angular

angular-animations