Angular Nested Router Outlet Children Disappear Before Router Animation Completes

THE SCENARIO

I have an Angular app with nested routing. The parent router outlet has a sliding animation. One of the child components (essentially one of the root pages), has a router outlet of its own, the child router outlet does not animate though.

THE ISSUE

The sliding animation works fine among all root components. However, when I'm at the root component with a nested router outlet, a strange thing happens. If I navigate out of it to another root component, its contents (current child component) disappears before the route animation finishes.

AN EXAMPLE

I created the following stackblitz to illustrate the issue: https://stackblitz.com/edit/angular-ivy-9gbzax

In the example, if you navigate between pages 1 and 2, no issue would appear. If you try to navigate from page3.child1 to either page 1 or page 2, the contents (the child component) will disappear before the animation terminates. Is there any way I can make the contents persist until the animation ends?

Solution

So I was able to solve the issue, though in a hacky way. What I did is to animate the children of the leaving route. I added the following in the group animation:

query(':leave *', [
    style({}),
    animate(1, style({}))
], optional)

To see the solution in action: https://stackblitz.com/edit/angular-ivy-7gskcz, the solution is the last couple of lines in the file animations.ts