The nested route disappears immediately and does not play: leave the animation

I have external routes: /posts

and /about

. /posts

the route has nested routes: /

and /pages/:pageNumber

.

When navigating between nested routes ( /

and /pages/:pageNumber

) the animation works well. But when you move to the /about

nested route, it disappears immediately.

animateChild()

Does not help. In the animation of the parent router component:

transition(':leave', [
  query('@*', animateChild()),
  animate('/*some easing*/', style({/*some styles*/}))
])

      

        
        
        
      

    

This raises an error query("@*") returned zero elements.

. Thus, the nested route is immediately removed, the parent component cannot see it.

Angular version: 4.2.2