Why simple angular routing animation not working?

Question

I have very basic routing angular animation, but for some reason it's not working. Animation definition is in app.component.ts <= there I have <router-outlet></router-outlet> and two links that when are clicked should route to appreciative child-component with "fade-in" animation - but the animation is not visible. Problem reproduction: link to stackblitz I think the source of the problem is that query(':enter') is not "querying" (when I remove optional: true flag - there are error's log in the console)

Answer 1

router animation is not triggered as there is nothing changing that you pass to @routeAnimations and it is only trying to run at start. it should be [@routeAnimations]=outlet.activatedRouteData.animation or something that is changing upon route changes. follow the route animations guide on angular.io with guides of how to create route transition animations

Answer 2

See please, I redo your example - need to add some properties to html and routes: https://stackblitz.com/edit/angular-ivy-dypkqg

const routes: Routes = [
  { path: '1', component: OneComponent, data: {animation: '1'}  },
  { path: '2', component: TwoComponent, data: {animation: '2'}  },
]

add import BrowserAnimationsModule

<a routerLink="1">1</a><br />
<a routerLink="2">2</a>

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

Animation you can return own old.