refactor(router): resolve view transition promise in a timeout when u…

…nsupported

Related to angular#51131, this change ensures that the router navigation exits
the current event loop before rendering the route when the view transition
feature is enabled, when the browser does not support view transitions.

packages/router/src/utils/view_transition.ts

@@ -108,7 +108,10 @@ export function createViewTransition(
   return injector.get(NgZone).runOutsideAngular(() => {
     if (!document.startViewTransition || transitionOptions.skipNextTransition) {
       transitionOptions.skipNextTransition = false;
-      return Promise.resolve();
+      // The timing of `startViewTransition` is closer to a macrotask. It won't be called
+      // until the current event loop exits so we use a promise resolved in a timeout instead
+      // of Promise.resolve() directly.
+      return new Promise((resolve) => setTimeout(resolve));
     }
 
     let resolveViewTransitionStarted: () => void;

packages/router/test/view_transitions.spec.ts

@@ -11,13 +11,16 @@ import {Component, destroyPlatform, inject} from '@angular/core';
 import {bootstrapApplication} from '@angular/platform-browser';
 import {withBody} from '@angular/private/testing';
 import {
+  ActivationStart,
   Event,
   NavigationEnd,
   provideRouter,
   Router,
   withDisabledInitialNavigation,
   withViewTransitions,
 } from '@angular/router';
+import {BehaviorSubject, Subject, firstValueFrom, skip} from 'rxjs';
+import {afterNextNavigation} from '../src/utils/navigations';
 
 describe('view transitions', () => {
   if (isNode) {