Route animation selectors stop working as soon as createComponent + attachView are called

This issue has been tracked since 2023-01-23.

Which @angular/* package(s) are the source of the bug?

@angular/[email protected] and earlier

Is this a regression?



If createComponent + attachView are called before bootstrap (example use case: to hydrate certain components on prerendered applications & keep performance good without killing TTI),
the routing animations stop behaving.

Things I noticed:

  • It doesn't matter where the router.navigate is triggered from (hydrated component or not)
  • The ":leave" selector stops working entirely, :enter still seems to work.
  • Calling appRef.deattachView(hydratedComponentView), - the routing animations start working again.

I have created a repro where you can turn on & off simulateHydration from the environment.ts.
How it works:

  • SimulateHydration = false: There is a simple routing slide animation.
  • SimulateHydration = true: The header component is attached using createComponent + attachView. The application can be bootstrapped at any time by clicking somewhere on the window, after which you will notice that the sliding animations when changing routes, no longer work. If you remove the { optional: true }, you will notice the error only with the querySelector not matching any leave elements only happens on this version.

Please provide a link to a minimal reproduction of the bug

Please provide the exception or error you saw

Animation does not work / behaves differently

Please provide the environment you discovered this bug in (run ng version)

Angular 15.1.1.
Replicated on Stackblitz.

Anything else?

No response

JeanMeche wrote this answer on 2023-01-23

The :enter working and the :leave being broken reminds me of #48667.

Davste93 wrote this answer on 2023-01-23

The :enter working and the :leave being broken reminds me of #48667.

From what I can tell the "leaving" component / route, does not render at all when the SimulateHydration is true (ie: it's not even in the DOM, so therefore it can't be selected).

Davste93 wrote this answer on 2023-01-23

I made an even simpler Repro:

If I bootstrap any other component (other than AppComponent) first - this can be a dummy component with no template / functionality or deps - animations break inside app component.

  ngDoBootstrap() {

If I bootstrap AppComponent first, it's fine:

  ngDoBootstrap() {

Any possible workarounds?

More Details About Repo
Owner Name angular
Repo Name angular
Full Name angular/angular
Language TypeScript
Created Date 2014-09-18
Updated Date 2023-03-21
Star Count 87006
Watcher Count 3028
Fork Count 23170
Issue Count 1418


Issue Title Created Date Updated Date