Angular 8: анимация перехода маршрута

Question

Я хотел бы реализовать анимацию перехода маршрута, но моя маршрутизация находится в структуре подпапок. Для каждой страницы должна быть постепенная анимация для каждого перехода страницы:

animations: [
 trigger("pageAnimation", [
  transition(":enter", [
    style({
      opacity: 0,
    }),
    animate(
      "0.2s ease-in",
      style({
        opacity: 1,
      }),
    ),
  ]),
]),
],

home-routing.module.ts

const routes: Routes = [
  { path: "*", redirectTo: "device-type" },
  { path: "", redirectTo: "device-type", pathMatch: "full" },
  { path: "device-type", component: DevicetypeComponent },
  { path: "device-brand", component: DevicebrandComponent },
  { path: "device-model", component: DevicemodelComponent }
];

однако мой розетка маршрутизатора находится в компоненте приложения (родительский компонент)

app.component. html

<div class="container-fluid">
  <router-outlet></router-outlet>
</div>

Я попробовал следующий пример, но анимация не активирована .

https://stackblitz.com/edit/angular-7-improved-router-transition-animation?file=src%2Fapp%2Fcommon%2Fanimations.ts

Единственный рабочий обходной путь, который я нашел, - это добавить анимацию к каждому отдельному компоненту, но он не использует цель анимации перехода маршрута.

Кто-нибудь знает, как добавить анимацию перехода маршрутизатора, если розетка маршрутизатора и маршрутизация страницы находятся на разных модулях? (В моем случае маршруты находятся в модуле домашней маршрутизации, но выход маршрутизатора находится в компоненте моего приложения)

Благодарим вас за помощь!

ОБНОВЛЕНИЕ:

хорошо, я нашла решение моего вопроса https://stackblitz.com/edit/angular-lazyloading-animation?file=src%2Fapp%2Fapp.component.html