Angular AuthGuard失效求助：已配置仍报无提供者错误

我正在使用Angular的CanActivate AuthGuard接口保护组件，相关代码实现如下：

AuthGuard 实现代码 #

@Injectable() 
export class AuthGuard implements CanActivate{ 
  constructor(private router: Router, private authService: AuthenticationService) {} 
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> { 
    this.authService.isLoggedIn.take(1).map((isLoggedIn : boolean) => { 
      if(!isLoggedIn){ 
        this.router.navigate(['/login']); 
        return false; 
      } 
      return true; 
    }) 
    this.router.navigate(['/login']); 
    return false; 
  } 
}

路由配置代码 #

const appRoutes: Routes = [ 
  {path : '',redirectTo : 'login',pathMatch : 'full'}, 
  { path: 'home', component: HomeComponent,canActivate : [AuthGuard] } 
]

组件Providers配置 #

@Component({ 
  selector: 'app-root', 
  templateUrl: './app.component.html', 
  providers: [AuthGuard, ExpenseService,SellDetailService,AuthenticationService], 
  styleUrls: ['./app.component.css'] 
})

运行应用时出现以下错误：

StaticInjectorError(AppModule)[AuthGuard]:

StaticInjectorError(Platform: core)[AuthGuard]: NullInjectorError: No provider for AuthGuard!

我认为自己已正确实现，但功能无法正常工作，请问我哪里出错了？

问题分析与解决 #

1. 依赖注入失败：NullInjectorError #

你把AuthGuard注册在了AppComponent的providers数组里，但Angular的路由守卫是由**根注入器（AppModule级别）**来解析的，组件级注入器的提供者无法被路由模块访问到。这就导致路由在尝试获取AuthGuard实例时找不到对应的提供者，从而抛出NullInjectorError。

你可以二选一解决这个问题：

• 方案一：在AppModule中注册AuthGuard
  修改app.module.ts，把AuthGuard添加到模块的providers数组中：

  @NgModule({
    declarations: [/* 组件声明 */],
    imports: [/* 模块导入 */],
    providers: [AuthGuard, AuthenticationService], // 在这里注册
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

  同时记得移除AppComponent的providers里的AuthGuard，避免重复创建实例。

• 方案二：使用providedIn: 'root'简化注入
  在AuthGuard的@Injectable装饰器中直接指定根注入器，这是Angular 6+推荐的方式，无需手动在任何模块/组件中注册：

  @Injectable({ providedIn: 'root' }) 
  export class AuthGuard implements CanActivate{ 
    // ... 原有代码逻辑
  }
  

2. canActivate方法逻辑错误：功能失效 #

你的canActivate方法有个致命问题：你订阅了this.authService.isLoggedIn的Observable，但没有返回这个Observable，而是直接执行了后面的this.router.navigate(['/login']); return false;。这意味着不管用户是否登录，代码都会直接跳转到登录页并返回false，完全忽略了之前的登录状态判断逻辑。

修改后的正确代码如下（适配新版本RxJS的pipe写法）：

import { map, take } from 'rxjs/operators';

// ...

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> { 
  return this.authService.isLoggedIn.pipe(
    take(1), // 只取一次值，避免内存泄漏
    map((isLoggedIn: boolean) => { 
      if(!isLoggedIn){ 
        this.router.navigate(['/login']); 
        return false; 
      } 
      return true; 
    })
  );
}

另外要确保AuthenticationService中的isLoggedIn是一个能正确传递登录状态的Observable（比如BehaviorSubject），这样守卫才能拿到准确的登录状态。

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