fix(router): Update recognize stage to use internally async/await (angular#62994)

This is effectively a revert of angular@72e6a94.
Debugging the recognize stage is considerably easier with async/await
stacks compared to rxjs. This also improves maintainability and is a
better 1:1 with server-side logic that has been implemented to match
and can be more easily kept in sync.

This also ensures that the recognize step is always async, whereas it
can sometimes be synchronous with rxjs.

BREAKING CHANGE: Router navigations may take several additional
microtasks to complete. Tests have been found to often be highly
dependent on the exact timing of navigation completions with respect to
the microtask queue. The most common fix for tests is to ensure all
navigations have been completed before making assertions. On rare
occasions, this can also affect production applications. This can be
caused by multiple subscriptions to router state throughout the application,
both of which trigger navigations that happened to not conflict with the
previous timing.

PR Close angular#62994

Author: atscott

packages/core/test/bundling/router/bundle.golden_symbols.json

@@ -395,6 +395,7 @@
       "_stripIndexHtml",
       "_stripOrigin",
       "_wasLastNodeCreated",
+      "abortSignalToObservable",
       "activateRoutes",
       "activeConsumer",
       "addAfterRenderSequencesForView",
@@ -865,7 +866,6 @@
       "joinWithSlash",
       "last",
       "last2",
-      "last3",
       "lastNodeWasCreated",
       "lastSelectedElementIdx",
       "leaveDI",
@@ -930,7 +930,6 @@
       "ngZoneInstanceId",
       "noLeftoversInUrl",
       "noMatch",
-      "noMatch",
       "noSideEffects",
       "nodeChildrenAsMap",
       "noop",
@@ -1028,8 +1027,6 @@
       "saveContentQueryAndDirectiveIndex",
       "saveNameToExportMap",
       "saveResolvedLocalsInData",
-      "scan",
-      "scanInternals",
       "scheduleArray",
       "scheduleAsyncIterable",
       "scheduleCallbackWithMicrotask",

packages/platform-server/test/incremental_hydration_spec.ts

@@ -2585,6 +2585,7 @@ describe('platform-server partial hydration integration', () => {
 
       const routeLink = doc.getElementById('route-link')!;
       routeLink.click();
+      await appRef.whenStable();
       await allPendingDynamicImports();
       appRef.tick();
 

packages/router/src/apply_redirects.ts

@@ -7,57 +7,48 @@
  */
 
 import {Injector, runInInjectionContext, ɵRuntimeError as RuntimeError} from '@angular/core';
-import {Observable, of, throwError} from 'rxjs';
-import {map} from 'rxjs/operators';
 
 import {RuntimeErrorCode} from './errors';
 import {NavigationCancellationCode} from './events';
-import {LoadedRouterConfig, RedirectFunction, Route} from './models';
+import {RedirectFunction, Route} from './models';
 import {navigationCancelingError} from './navigation_canceling_error';
 import {ActivatedRouteSnapshot} from './router_state';
 import {Params, PRIMARY_OUTLET} from './shared';
 import {UrlSegment, UrlSegmentGroup, UrlSerializer, UrlTree} from './url_tree';
 import {wrapIntoObservable} from './utils/collection';
 
-export class NoMatch {
+export const NO_MATCH_ERROR_NAME = 'ɵNoMatch';
+export class NoMatch extends Error {
+  override readonly name: string = NO_MATCH_ERROR_NAME;
   public segmentGroup: UrlSegmentGroup | null;
 
   constructor(segmentGroup?: UrlSegmentGroup) {
+    super();
     this.segmentGroup = segmentGroup || null;
   }
 }
 
+export const ABSOLUTE_REDIRECT_ERROR_NAME = 'ɵAbsoluteRedirect';
 export class AbsoluteRedirect extends Error {
+  override readonly name: string = ABSOLUTE_REDIRECT_ERROR_NAME;
   constructor(public urlTree: UrlTree) {
     super();
   }
 }
 
-export function noMatch(segmentGroup: UrlSegmentGroup): Observable<any> {
-  return throwError(new NoMatch(segmentGroup));
-}
-
-export function absoluteRedirect(newTree: UrlTree): Observable<any> {
-  return throwError(new AbsoluteRedirect(newTree));
-}
-
-export function namedOutletsRedirect(redirectTo: string): Observable<any> {
-  return throwError(
-    new RuntimeError(
-      RuntimeErrorCode.NAMED_OUTLET_REDIRECT,
-      (typeof ngDevMode === 'undefined' || ngDevMode) &&
-        `Only absolute redirects can have named outlets. redirectTo: '${redirectTo}'`,
-    ),
+export function namedOutletsRedirect(redirectTo: string): never {
+  throw new RuntimeError(
+    RuntimeErrorCode.NAMED_OUTLET_REDIRECT,
+    (typeof ngDevMode === 'undefined' || ngDevMode) &&
+      `Only absolute redirects can have named outlets. redirectTo: '${redirectTo}'`,
   );
 }
 
-export function canLoadFails(route: Route): Observable<LoadedRouterConfig> {
-  return throwError(
-    navigationCancelingError(
-      (typeof ngDevMode === 'undefined' || ngDevMode) &&
-        `Cannot load children because the guard of the route "path: '${route.path}'" returned false`,
-      NavigationCancellationCode.GuardRejected,
-    ),
+export function canLoadFails(route: Route): never {
+  throw navigationCancelingError(
+    (typeof ngDevMode === 'undefined' || ngDevMode) &&
+      `Cannot load children because the guard of the route "path: '${route.path}'" returned false`,
+    NavigationCancellationCode.GuardRejected,
   );
 }
 
@@ -67,49 +58,46 @@ export class ApplyRedirects {
     private urlTree: UrlTree,
   ) {}
 
-  lineralizeSegments(route: Route, urlTree: UrlTree): Observable<UrlSegment[]> {
+  async lineralizeSegments(route: Route, urlTree: UrlTree): Promise<UrlSegment[]> {
     let res: UrlSegment[] = [];
     let c = urlTree.root;
     while (true) {
       res = res.concat(c.segments);
       if (c.numberOfChildren === 0) {
-        return of(res);
+        return res;
       }
 
       if (c.numberOfChildren > 1 || !c.children[PRIMARY_OUTLET]) {
-        return namedOutletsRedirect(`${route.redirectTo!}`);
+        throw namedOutletsRedirect(`${route.redirectTo!}`);
       }
 
       c = c.children[PRIMARY_OUTLET];
     }
   }
 
-  applyRedirectCommands(
+  async applyRedirectCommands(
     segments: UrlSegment[],
     redirectTo: string | RedirectFunction,
     posParams: {[k: string]: UrlSegment},
     currentSnapshot: ActivatedRouteSnapshot,
     injector: Injector,
-  ): Observable<UrlTree> {
-    return getRedirectResult(redirectTo, currentSnapshot, injector).pipe(
-      map((redirect) => {
-        if (redirect instanceof UrlTree) {
-          throw new AbsoluteRedirect(redirect);
-        }
-
-        const newTree = this.applyRedirectCreateUrlTree(
-          redirect,
-          this.urlSerializer.parse(redirect),
-          segments,
-          posParams,
-        );
-
-        if (redirect[0] === '/') {
-          throw new AbsoluteRedirect(newTree);
-        }
-        return newTree;
-      }),
+  ): Promise<UrlTree> {
+    const redirect = await getRedirectResult(redirectTo, currentSnapshot, injector);
+    if (redirect instanceof UrlTree) {
+      throw new AbsoluteRedirect(redirect);
+    }
+
+    const newTree = this.applyRedirectCreateUrlTree(
+      redirect,
+      this.urlSerializer.parse(redirect),
+      segments,
+      posParams,
     );
+
+    if (redirect[0] === '/') {
+      throw new AbsoluteRedirect(newTree);
+    }
+    return newTree;
   }
 
   applyRedirectCreateUrlTree(
@@ -201,15 +189,15 @@ function getRedirectResult(
   redirectTo: string | RedirectFunction,
   currentSnapshot: ActivatedRouteSnapshot,
   injector: Injector,
-): Observable<string | UrlTree> {
+): Promise<string | UrlTree> {
   if (typeof redirectTo === 'string') {
-    return of(redirectTo);
+    return Promise.resolve(redirectTo);
   }
   const redirectToFn = redirectTo;
   const {queryParams, fragment, routeConfig, url, outlet, params, data, title} = currentSnapshot;
   return wrapIntoObservable(
     runInInjectionContext(injector, () =>
       redirectToFn({params, data, queryParams, fragment, routeConfig, url, outlet, title}),
     ),
-  );
+  ).toPromise() as Promise<string | UrlTree>;
 }

packages/router/src/navigation_transition.ts

@@ -90,6 +90,7 @@ import {UrlSerializer, UrlTree} from './url_tree';
 import {Checks, getAllRouteGuards} from './utils/preactivation';
 import {CREATE_VIEW_TRANSITION} from './utils/view_transition';
 import {getClosestRouteInjector} from './utils/config';
+import {abortSignalToObservable} from './utils/abort_signal_to_observable';
 
 /**
  * @description
@@ -539,6 +540,7 @@ export class NavigationTransitions {
                   router.config,
                   this.urlSerializer,
                   this.paramsInheritanceStrategy,
+                  overallTransitionState.abortController.signal,
                 ),
 
                 // Update URL if in `eager` update mode
@@ -778,12 +780,7 @@ export class NavigationTransitions {
           take(1),
 
           takeUntil(
-            new Observable<void>((subscriber) => {
-              const abortSignal = overallTransitionState.abortController.signal;
-              const handler = () => subscriber.next();
-              abortSignal.addEventListener('abort', handler);
-              return () => abortSignal.removeEventListener('abort', handler);
-            }).pipe(
+            abortSignalToObservable(overallTransitionState.abortController.signal).pipe(
               // Ignore aborts if we are already completed, canceled, or are in the activation stage (we have targetRouterState)
               filter(() => !completedOrAborted && !overallTransitionState.targetRouterState),
               tap(() => {
@@ -831,6 +828,7 @@ export class NavigationTransitions {
           ),
 
           finalize(() => {
+            overallTransitionState.abortController.abort();
             /* When the navigation stream finishes either through error or success,
              * we set the `completed` or `errored` flag. However, there are some
              * situations where we could get here without either of those being set.

packages/router/src/operators/check_guards.ts

@@ -51,6 +51,7 @@ import {
 } from '../utils/type_guards';
 
 import {prioritizedGuardValue} from './prioritized_guard_value';
+import {takeUntilAbort} from '../utils/abort_signal_to_observable';
 
 export function checkGuards(
   injector: EnvironmentInjector,
@@ -244,6 +245,7 @@ export function runCanLoadGuards(
   route: Route,
   segments: UrlSegment[],
   urlSerializer: UrlSerializer,
+  abortSignal: AbortSignal,
 ): Observable<boolean> {
   const canLoad = route.canLoad;
   if (canLoad === undefined || canLoad.length === 0) {
@@ -255,7 +257,7 @@ export function runCanLoadGuards(
     const guardVal = isCanLoad(guard)
       ? guard.canLoad(route, segments)
       : runInInjectionContext(injector, () => (guard as CanLoadFn)(route, segments));
-    return wrapIntoObservable(guardVal);
+    return wrapIntoObservable(guardVal).pipe(takeUntilAbort(abortSignal));
   });
 
   return of(canLoadObservables).pipe(prioritizedGuardValue(), redirectIfUrlTree(urlSerializer));
@@ -277,6 +279,7 @@ export function runCanMatchGuards(
   route: Route,
   segments: UrlSegment[],
   urlSerializer: UrlSerializer,
+  abortSignal: AbortSignal,
 ): Observable<GuardResult> {
   const canMatch = route.canMatch;
   if (!canMatch || canMatch.length === 0) return of(true);
@@ -286,7 +289,7 @@ export function runCanMatchGuards(
     const guardVal = isCanMatch(guard)
       ? guard.canMatch(route, segments)
       : runInInjectionContext(injector, () => (guard as CanMatchFn)(route, segments));
-    return wrapIntoObservable(guardVal);
+    return wrapIntoObservable(guardVal).pipe(takeUntilAbort(abortSignal));
   });
 
   return of(canMatchObservables).pipe(prioritizedGuardValue(), redirectIfUrlTree(urlSerializer));

packages/router/src/operators/recognize.ts

@@ -23,20 +23,19 @@ export function recognize(
   config: Route[],
   serializer: UrlSerializer,
   paramsInheritanceStrategy: 'emptyOnly' | 'always',
+  abortSignal: AbortSignal,
 ): MonoTypeOperatorFunction<NavigationTransition> {
-  return mergeMap((t) =>
-    recognizeFn(
+  return mergeMap(async (t) => {
+    const {state: targetSnapshot, tree: urlAfterRedirects} = await recognizeFn(
       injector,
       configLoader,
       rootComponentType,
       config,
       t.extractedUrl,
       serializer,
       paramsInheritanceStrategy,
-    ).pipe(
-      map(({state: targetSnapshot, tree: urlAfterRedirects}) => {
-        return {...t, targetSnapshot, urlAfterRedirects};
-      }),
-    ),
-  );
+      abortSignal,
+    );
+    return {...t, targetSnapshot, urlAfterRedirects};
+  });
 }