fix(router): Remove 'any' type from route guards (angular#60378)

This commit removes `'any'` from the type union for router guards and
replaces it with 'string', which will eventually also be removed. This
change allows TypeScript to infer the parameter types of functions when
using functional guards and enables stricter type-checking to ensure the
guard array contains valid values.

BREAKING CHANGE: The guards arrays on `Route` no longer include `any` in
the type union. The union includes functions for the functional guards
as well as a type matching `Injector.get`: `ProviderToken<T>|string`.
Note that string is still deprecated on both the route guards and
`Injector.get`.

PR Close angular#60378

Author: atscott

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

@@ -244,7 +244,10 @@ export class DefaultUrlSerializer implements UrlSerializer {
 }
 
 // @public @deprecated
-export type DeprecatedGuard = ProviderToken<any> | any;
+export type DeprecatedGuard = ProviderToken<any> | string;
+
+// @public @deprecated
+export type DeprecatedResolve = DeprecatedGuard | any;
 
 // @public
 export type DetachedRouteHandle = {};
@@ -611,7 +614,7 @@ export interface Resolve<T> {
 
 // @public
 export type ResolveData = {
-    [key: string | symbol]: ResolveFn<unknown> | DeprecatedGuard;
+    [key: string | symbol]: ResolveFn<unknown> | DeprecatedResolve;
 };
 
 // @public

packages/router/src/models.ts

@@ -46,7 +46,7 @@ import type {UrlSegment, UrlSegmentGroup, UrlTree} from './url_tree';
 export type OnSameUrlNavigation = 'reload' | 'ignore';
 
 /**
- * The `InjectionToken` and `@Injectable` classes for guards and resolvers are deprecated in favor
+ * The `InjectionToken` and `@Injectable` classes for guards are deprecated in favor
  * of plain JavaScript functions instead. Dependency injection can still be achieved using the
  * [`inject`](api/core/inject) function from `@angular/core` and an injectable class can be used as
  * a functional guard using [`inject`](api/core/inject): `canActivate: [() =>
@@ -58,11 +58,23 @@ export type OnSameUrlNavigation = 'reload' | 'ignore';
  * @see {@link CanActivateFn}
  * @see {@link CanActivateChildFn}
  * @see {@link CanDeactivateFn}
+ * @see {@link /api/core/inject inject}
+ * @publicApi
+ */
+export type DeprecatedGuard = ProviderToken<any> | string;
+
+/**
+ * The `InjectionToken` and `@Injectable` classes for resolvers are deprecated in favor
+ * of plain JavaScript functions instead. Dependency injection can still be achieved using the
+ * [`inject`](api/core/inject) function from `@angular/core` and an injectable class can be used as
+ * a functional guard using [`inject`](api/core/inject): `myResolvedData: () => inject(MyResolver).resolve()`.
+ *
+ * @deprecated
  * @see {@link ResolveFn}
  * @see {@link /api/core/inject inject}
  * @publicApi
  */
-export type DeprecatedGuard = ProviderToken<any> | any;
+export type DeprecatedResolve = DeprecatedGuard | any;
 
 /**
  * The supported types that can be returned from a `Router` guard.
@@ -197,7 +209,7 @@ export type Data = {
  * @publicApi
  */
 export type ResolveData = {
-  [key: string | symbol]: ResolveFn<unknown> | DeprecatedGuard;
+  [key: string | symbol]: ResolveFn<unknown> | DeprecatedResolve;
 };
 
 /**

packages/router/src/models_deprecated.ts

@@ -10,4 +10,4 @@
 // The public API re-exports everything from this file, which can be patched
 // locally in g3 to prevent regressions after cleanups complete.
 
-export {DeprecatedGuard} from './models';
+export {DeprecatedGuard, DeprecatedResolve} from './models';

packages/router/src/operators/check_guards.ts

@@ -163,20 +163,21 @@ function runCanActivate(
   const canActivate = futureARS.routeConfig ? futureARS.routeConfig.canActivate : null;
   if (!canActivate || canActivate.length === 0) return of(true);
 
-  const canActivateObservables = canActivate.map(
-    (canActivate: CanActivateFn | ProviderToken<unknown>) => {
-      return defer(() => {
-        const closestInjector = getClosestRouteInjector(futureARS) ?? injector;
-        const guard = getTokenOrFunctionIdentity<CanActivate>(canActivate, closestInjector);
-        const guardVal = isCanActivate(guard)
-          ? guard.canActivate(futureARS, futureRSS)
-          : runInInjectionContext(closestInjector, () =>
-              (guard as CanActivateFn)(futureARS, futureRSS),
-            );
-        return wrapIntoObservable(guardVal).pipe(first());
-      });
-    },
-  );
+  const canActivateObservables = canActivate.map((canActivate) => {
+    return defer(() => {
+      const closestInjector = getClosestRouteInjector(futureARS) ?? injector;
+      const guard = getTokenOrFunctionIdentity<CanActivate>(
+        canActivate as ProviderToken<CanActivate>,
+        closestInjector,
+      );
+      const guardVal = isCanActivate(guard)
+        ? guard.canActivate(futureARS, futureRSS)
+        : runInInjectionContext(closestInjector, () =>
+            (guard as CanActivateFn)(futureARS, futureRSS),
+          );
+      return wrapIntoObservable(guardVal).pipe(first());
+    });
+  });
   return of(canActivateObservables).pipe(prioritizedGuardValue());
 }
 
@@ -281,7 +282,7 @@ export function runCanMatchGuards(
   if (!canMatch || canMatch.length === 0) return of(true);
 
   const canMatchObservables = canMatch.map((injectionToken) => {
-    const guard = getTokenOrFunctionIdentity(injectionToken, injector);
+    const guard = getTokenOrFunctionIdentity(injectionToken as ProviderToken<any>, injector);
     const guardVal = isCanMatch(guard)
       ? guard.canMatch(route, segments)
       : runInInjectionContext(injector, () => (guard as CanMatchFn)(route, segments));