I can't get route animations to work correctly when routing between lazy loaded modules.
- AppModule: [HomeComponent, AboutComponent]
- LazyModule: [ Lazy1Component, Lazy2Component]
When changing between components of the same module (e.g. Home > About or Lazy1 > Lazy2) the animation works properly, the leaving page animates out, and the entering page animates in.
HOWEVER, when changing between components of different modules (e.g. Home > Lazy1 or Lazy2 > About) the leaving page disappears instantly, and then the entering page animates in.
I cannot figure out how to animate the leaving page, it appears to get removed instantly from the dom.
Check the stackblitz: https://stackblitz.com/edit/angular-lazyloading-animation-xkxye9?file=src/app/app.routing.ts
How can we animate when switching between components from different (lazy) modules? Is this something that's not possible with Angular?
Note: I had to use the {option: true} because the query(:leave) throws an error that zero elements are found.
