feat(router): add asynchronous redirects (angular#60863)

Adds support for asynchronous redirects in the router, allowing redirect logic to be resolved dynamically (e.g., via API or async function). This enhances routing flexibility and supports more complex navigation scenarios.

BREAKING CHANGE: The `RedirectFn` can now return `Observable` or
`Promise`. Any code that directly calls functions returning this type
may need to be adjusted to account for this.

PR Close angular#60863

Author: MeddahAbdellah

goldens/public-api/router/index.api.md

@@ -606,7 +606,7 @@ export class RedirectCommand {
 }
 
 // @public
-export type RedirectFunction = (redirectData: Pick<ActivatedRouteSnapshot, 'routeConfig' | 'url' | 'params' | 'queryParams' | 'fragment' | 'data' | 'outlet' | 'title'>) => string | UrlTree;
+export type RedirectFunction = (redirectData: Pick<ActivatedRouteSnapshot, 'routeConfig' | 'url' | 'params' | 'queryParams' | 'fragment' | 'data' | 'outlet' | 'title'>) => MaybeAsync<string | UrlTree>;
 
 // @public
 export interface Resolve<T> {

packages/router/src/apply_redirects.ts

@@ -8,6 +8,7 @@
 
 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';
@@ -16,6 +17,7 @@ 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 {
   public segmentGroup: UrlSegmentGroup | null;
@@ -88,31 +90,26 @@ export class ApplyRedirects {
     posParams: {[k: string]: UrlSegment},
     currentSnapshot: ActivatedRouteSnapshot,
     injector: Injector,
-  ): UrlTree {
-    if (typeof redirectTo !== 'string') {
-      const redirectToFn = redirectTo;
-      const {queryParams, fragment, routeConfig, url, outlet, params, data, title} =
-        currentSnapshot;
-      const newRedirect = runInInjectionContext(injector, () =>
-        redirectToFn({params, data, queryParams, fragment, routeConfig, url, outlet, title}),
-      );
-      if (newRedirect instanceof UrlTree) {
-        throw new AbsoluteRedirect(newRedirect);
-      }
-
-      redirectTo = newRedirect;
-    }
-
-    const newTree = this.applyRedirectCreateUrlTree(
-      redirectTo,
-      this.urlSerializer.parse(redirectTo),
-      segments,
-      posParams,
+  ): 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;
+      }),
     );
-    if (redirectTo[0] === '/') {
-      throw new AbsoluteRedirect(newTree);
-    }
-    return newTree;
   }
 
   applyRedirectCreateUrlTree(
@@ -199,3 +196,20 @@ export class ApplyRedirects {
     return redirectToUrlSegment;
   }
 }
+
+function getRedirectResult(
+  redirectTo: string | RedirectFunction,
+  currentSnapshot: ActivatedRouteSnapshot,
+  injector: Injector,
+): Observable<string | UrlTree> {
+  if (typeof redirectTo === 'string') {
+    return of(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}),
+    ),
+  );
+}

packages/router/src/models.ts

@@ -316,7 +316,7 @@ export type RedirectFunction = (
     ActivatedRouteSnapshot,
     'routeConfig' | 'url' | 'params' | 'queryParams' | 'fragment' | 'data' | 'outlet' | 'title'
   >,
-) => string | UrlTree;
+) => MaybeAsync<string | UrlTree>;
 
 /**
  * A policy for when to run guards and resolvers on a route.

packages/router/src/recognize.ts

@@ -382,15 +382,16 @@ export class Recognizer {
     const inherited = getInherited(currentSnapshot, parentRoute, this.paramsInheritanceStrategy);
     currentSnapshot.params = Object.freeze(inherited.params);
     currentSnapshot.data = Object.freeze(inherited.data);
-    const newTree = this.applyRedirects.applyRedirectCommands(
+    const newTree$: Observable<UrlTree> = this.applyRedirects.applyRedirectCommands(
       consumedSegments,
       route.redirectTo!,
       positionalParamSegments,
       currentSnapshot,
       injector,
     );
 
-    return this.applyRedirects.lineralizeSegments(route, newTree).pipe(
+    return newTree$.pipe(
+      switchMap((newTree) => this.applyRedirects.lineralizeSegments(route, newTree)),
       mergeMap((newSegments: UrlSegment[]) => {
         return this.processSegment(
           injector,