Angular Nested Router Outlets Animation

Question

I am trying to add router animations to a couple of routes in my Ionic App. Due to nesting complexity (3 levels of nesting), Ionic built-in solution ion-router has erratic behavior.

So the first level follows as such

const routes: Routes = [
  {path: '', redirectTo: 'splash', pathMatch: 'full' },
  {path: 'splash', loadChildren: () => import('./pages/splash/splash.module').then(m => m.SplashPageModule)},
  {path: 'home', loadChildren: () => import('./pages/home/home.module').then(m => m.HomePageModule), data: {animation: 'Home'}},
  {path: 'auth', loadChildren: () => import('./pages/auth/auth.module').then(m => m.AuthPageModule), data: {animation: 'Auth'}},
];

And app.component.html

<ion-app>
  <div [@routeAnimations]="outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation']">
    <router-outlet #outlet="outlet"></router-outlet>
</div>
</ion-app>

If we follow /home we have these routes

const routes: Routes = [
  {
    path: '',
    component: HomePage,
    children: [
      {path: '', redirectTo: 'main', pathMatch: 'full' },
      {path: 'agenda', loadChildren: () => import('./home-agenda/home-agenda.module').then(m => m.HomeAgendaPageModule), data: {animation: 'Agenda'} },
      {path: 'main', loadChildren: () => import('./home-main/home-main.module').then(m => m.HomeMainPageModule), data: {animation: 'Main'} },
      {path: 'profile', loadChildren: () => import('./home-profile/home-profile.module').then(m => m.HomeProfilePageModule) },
      {path: 'item/:itemType/:id/:hour', loadChildren: () => import('../item/item.module').then(m => m.ItemPageModule)},
      {path: 'item/:itemType/:id', loadChildren: () => import('../item/item.module').then(m => m.ItemPageModule), data: {animation: 'Item'} },
    ]
  }
];

And it's outlet

<div [@routeAnimations]="outlet2 && outlet2.activatedRouteData && outlet2.activatedRouteData['animation']">
    <router-outlet #outlet2="outlet" class="home"></router-outlet>
</div>

The animations are defined here

export const slideInAnimation = trigger('routeAnimations', [
    transition('Auth => Home', [
        query(':enter, :leave', style({ position: 'fixed', width: '100%' }), { optional: true }),
        group([
            query(':enter', [
                style({ transform: 'translateX(-100%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' })),
                animateChild()
            ], { optional: true }),
            query(':leave', [
                style({ transform: 'translateX(0%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateX(100%)' })),
                animateChild()
            ], { optional: true }),
        ])
    ]),
    // transition('Main <=> Agenda', [
    //     query(':enter, :leave', style({ position: 'fixed', width: '100%', backgroundColor: 'gold' }), { optional: true }),
    //     group([
    //         query(':enter', [
    //             style({ transform: 'translateX(-100%)' }),
    //             animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' })),
    //             animateChild()
    //         ], { optional: true }),
    //         query(':leave', [
    //             style({ transform: 'translateX(0%)' }),
    //             animate('0.5s ease-in-out', style({ transform: 'translateX(100%)' })),
    //             animateChild()
    //         ], { optional: true }),
    //     ])
    // ]),
    transition('Home => Auth', [
        query(':enter, :leave', style({ position: 'fixed', width: '100%' }), { optional: true }),
        group([
            query(':enter', [
                style({ transform: 'translateX(100%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
            ], { optional: true }),
            query(':leave', [
                style({ transform: 'translateX(0%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' }))
            ], { optional: true }),
        ])
    ]),
]);

---

All of this to say that, From Home to Auth works fine and vice-versa, but the others like, Main to Item, nothing happens visually on the DOM although there is some blinking across affected HTML. If I increase transition time, the two routes appear briefly in the DOM but no visual effect

I tried to follow this presentation, which seems to cover everything but I don't know what I am missing. I also tried this blitz but no effect.