docs: type the external redirect guard (#33887)

`externalRedirect()` passed its guard to `canActivate` as an inline
arrow function. `canActivate` accepts `CanActivateFn` as well as the
deprecated class-based guards, typed as `ProviderToken<any>`. Any
function also matches `ProviderToken<any>`, so TypeScript didn't check
the inline guard against `CanActivateFn`. For example, a guard returning
a number would still compile.

This declares the guard as a `CanActivateFn` before passing it to
`canActivate`, so its return value is type checked. The behavior is
unchanged. A comment explains why the type is needed, so it isn't
inlined again later.

(cherry picked from commit 1543543)

Author: MeAkib

docs/src/app/routes.ts

@@ -7,7 +7,7 @@
  */
 
 import {Component} from '@angular/core';
-import {Route, Routes} from '@angular/router';
+import {CanActivateFn, Route, Routes} from '@angular/router';
 import {canActivateComponentSidenav} from './pages/component-sidenav/component-sidenav-can-load-guard';
 
 @Component({template: ''})
@@ -95,14 +95,16 @@ function adevRedirect(path: string) {
 }
 
 function externalRedirect(target: string | (() => string)): Partial<Route> {
+  // Typed explicitly, because `canActivate` also accepts deprecated class-based guards. Any function
+  // matches that type as well, so an inline guard wouldn't have its return value type checked.
+  const redirect: CanActivateFn = () => {
+    window.location.href = typeof target === 'string' ? target : target();
+    return false;
+  };
+
   return {
     // The router requires a `component`.
     component: RedirectPlaceholder,
-    canActivate: [
-      () => {
-        window.location.href = typeof target === 'string' ? target : target();
-        return false;
-      },
-    ],
+    canActivate: [redirect],
   };
 }