如何在特定注入上下文中提供Angular Guard并解决依赖注入问题

1. 路由级懒加载模块+限定服务作用域 #

这是最贴合按需初始化需求的方案：将认证相关服务和组件封装到独立模块中，仅在访问需认证路由时才加载该模块，自然完成服务初始化。

实现步骤 #

• 创建AuthModule，在模块的providers中声明完整依赖链的服务（确保不使用providedIn: 'root'）：

  // auth.module.ts
  @NgModule({
    declarations: [LoginComponent, RegisterComponent],
    imports: [
      RouterModule.forChild([
        { path: 'login', component: LoginComponent },
        // 嵌套需认证的路由组
        {
          path: 'protected',
          canMatch: [authGuard],
          loadChildren: () => import('./protected/protected.module').then(m => m.ProtectedModule)
        }
      ])
    ],
    providers: [
      EnvironmentService,
      FirebaseAppService,
      FirebaseAuthService,
      AuthService
    ]
  })
  export class AuthModule {}
  

• 编写函数式守卫authGuard，直接在模块上下文内注入服务：

  // auth.guard.ts
  export const authGuard: CanMatchFn = (route, segments) => {
    const authService = inject(AuthService);
    return authService.isAuthenticated().pipe(
      map(isAuth => {
        if (!isAuth) {
          return router.parseUrl('/auth/login');
        }
        return true;
      })
    );
  };
  

• 根路由中通过loadChildren引入AuthModule：

  // app-routing.module.ts
  const routes: Routes = [
    { path: '', loadChildren: () => import('./public/public.module').then(m => m.PublicModule) },
    { path: 'auth', loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule) }
  ];
  

2. 直接在路由配置中声明服务提供者 #

如果不想创建独立模块，可直接在需认证路由的providers字段中声明依赖服务，路由激活时自动初始化这些服务：

// app-routing.module.ts
const protectedRoutes: Routes = [
  {
    path: 'dashboard',
    canMatch: [authGuard],
    component: DashboardComponent,
    providers: [
      EnvironmentService,
      FirebaseAppService,
      FirebaseAuthService,
      AuthService
    ]
  }
];

const routes: Routes = [
  { path: '', component: PublicHomeComponent },
  ...protectedRoutes
];

export const appRoutes = provideRouter(routes);

此时守卫可直接用inject(AuthService)获取实例，无需额外处理注入上下文。

3. 修复runInInjectionContext的正确用法 #

若必须使用该API，需确保注入器来自当前路由上下文，而非直接传入NgModule类型：

export const authGuard: CanMatchFn = (route, segments) => {
  const injector = inject(Injector);
  return runInInjectionContext(injector, () => {
    const authService = inject(AuthService);
    return authService.isAuthenticated().pipe(
      map(isAuth => isAuth || router.parseUrl('/auth/login'))
    );
  });
};

注意：此方案仍需配合上述路由/模块级的服务提供者配置，否则AuthService依然无法被注入。

关键注意事项 #

• 确保EnvironmentService的初始化逻辑符合项目环境流程，保证其在依赖链上层服务初始化前已准备好所需配置。
• 所有服务均不使用providedIn: 'root'，严格限定在路由或模块作用域，避免不必要的全局初始化。
• 优先使用函数式守卫（CanMatchFn）而非类守卫，更适配Angular的注入上下文机制。

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