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?

Is this a regression?

Description

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

https://stackblitz.com/edit/angular13-validation-cz7edf?file=src/environments/environment.ts

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:
https://stackblitz.com/edit/angular13-validation-rtevdp?file=src/environments/environment.ts

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() {
      this.appRef.bootstrap(HeaderComponent);
      this.appRef.bootstrap(AppComponent);
 }

If I bootstrap AppComponent first, it's fine:

  ngDoBootstrap() {
      this.appRef.bootstrap(AppComponent);
      this.appRef.bootstrap(HeaderComponent);
  }

Any possible workarounds?

Your Name

Your Comment

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

YOU MAY BE INTERESTED

Issue Title	Created Date	Updated Date