如何在独立Angular应用中为所有路由配置canActivateFn？

在模块式Angular中，我们可以通过RouterModule.forRoot的第二个参数直接传入全局路由守卫配置，但使用provideRouter（独立模式API）时，不能直接沿用这种写法——因为它的第二个参数接受的是路由特性（RouterFeature），而非原始配置对象。

正确实现方式 #

你需要用withRouterConfig函数包裹全局守卫配置，再作为第二个参数传给provideRouter：

import { provideRouter, withRouterConfig } from '@angular/router';
import { AuthGuard } from './path-to-your-auth-guard';

// 你的路由数组定义
const routes = [
  // ... 具体路由项
];

// 在应用配置中注册路由
export const appConfig = {
  providers: [
    provideRouter(
      routes,
      withRouterConfig({
        canActivate: [AuthGuard],
        // 还可以添加其他全局守卫，比如canDeactivate、canLoad等
      })
    )
  ]
};

为什么之前的写法不生效？ #

provideRouter的第二个参数类型是RouterFeature[] | RouterFeature，它只接受Angular提供的路由特性函数（比如withRouterConfig、withDebugTracing），直接传入{ canActivate: [...] }这种原始配置对象会被框架忽略，所以守卫不会生效。

内容的提问来源于stack exchange，提问作者Vlad