Child routes not animating off when routing to another parent route

Question

I am creating a frontend app for learning purposes and I encountered a problem I don't quite understand how to solve.

Basically animation routing works properly on "same level" routes (parent -> parent), child -> (another child in the same parent route) but when I switch route to another parent, child route is not animating off (not doing it's :leave animation) and just leaving the dom instantly (https://streamable.com/co0gs - example - first showing animations between child routes and showing problem when clicking "Kalendarz" route).

I believe my problem is me not understanding animation queries properly but if you just point me in the right direction I will hopefully solve this problem on my own :)

Here are some files for your convenience:

Project repo: https://github.com/Micozus/Pawganiser-front/

Animation file: https://github.com/Micozus/Pawganiser-front/blob/master/src/app/animations/animations.ts

Routes module: https://github.com/Micozus/Pawganiser-front/blob/master/src/app/app-routing.module.ts

Parent route component: https://github.com/Micozus/Pawganiser-front/blob/master/src/app/app.component.html

Child routes component: https://github.com/Micozus/Pawganiser-front/blob/master/src/app/main-functions/my-pets/my-pets.component.html

I thought i did :) thats the repo: https://github.com/Micozus/Pawganiser-front/ — Paweł Mikos, Dec 23 '19 at 08:41
`:leave` animation was not working for children routes. After converting children routes to direct paths of parent ones animation starts working — Oleg Bondarenko, Dec 23 '19 at 08:56
@OlegBondarenko so something like: `{path: 'my-pets', component: MyPetsComponent, data: {animation: 'PetPage'}}` and `{path: 'my-pets/start', component: PetStartComponent, data: {animation: 'PetStartPage'}},` next? Is it like... not recommended because i would be able to outsource this routing to separate app modules? — Paweł Mikos, Dec 23 '19 at 09:37
@PawełMikos yes it will break module splitting and fix animation. As I said it is workaround but not solution. — Oleg Bondarenko, Dec 23 '19 at 09:42
@OlegBondarenko thank you though :) Will come back to this problem when i'll start to module split it. — Paweł Mikos, Dec 23 '19 at 09:45

score 0 · Answer 1 · answered Dec 23 '19 at 09:36

@PawełMikos in generally it is workaround but not solution. I would be replace child routes to parent level like this :

const routes: Routes = [
  {path: '', redirectTo: '/login', pathMatch: 'full'},
  {
 path: 'my-pets', component: MyPetsComponent, data: {animation: 'PetPage'},
 path: 'my-pets/start', component: PetStartComponent, data: {animation: 'PetStartPage'}
 path: 'my-pets/list', component: PetsListComponent, data: {animation: 'PetListPage'},
// more child routes
  ,
  {path: 'calendar', component: PetCalendarComponent, data: {animation: 'CalendarPage'}},
  {path: 'search-nearby', component: PetNearbyComponent, data: {animation: 'SearchPage'}},
  {path: 'settings', component: SettingsComponent, data: {animation: 'SettingsPage'}},
  {path: 'login', component: LoginComponent, data: {animation: 'LoginPage'}}
];

That simple change made it but then I should get rid of child routing and treat that routes as same level parent routes right? — Paweł Mikos, Dec 23 '19 at 09:41
Yes , it is correct but a bit awkward and tell the truth I expected more flexibility from Angular. — Oleg Bondarenko, Dec 23 '19 at 09:45
@PawełMikos if it is correct answer could you appropriate mark it ? — Oleg Bondarenko, Jan 02 '20 at 16:50

Child routes not animating off when routing to another parent route

1 Answers1