Angular中guard is not a function错误求助及代码排查

核心问题 #

你的AuthGuard类里的守卫方法名不符合Angular规范——路由守卫要求方法名为小写c开头的canActivate，但你写成了大写C开头的CanActivate，导致Angular无法识别这个守卫方法，进而抛出"guard is not a function"错误，最终引发路由跳转异常。

修复步骤 #

直接修改AuthGuard中的方法名，将CanActivate改为canActivate：

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, RouterStateSnapshot,Router,UrlTree } from '@angular/router';
import { AuthService } from '../services/auth.service';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class AuthGuard {
  constructor(public authService: AuthService, public router: Router) {}

  // 修正方法名：CanActivate → canActivate
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | UrlTree | boolean {
    if (!this.authService.isLoggedIn()) {
      this.router.navigate(['login']);
      // 补充返回false，避免未登录状态下路由仍尝试跳转
      return false;
    }
    return true;
  }
}

额外优化建议 #

1. 守卫逻辑补充：未登录时除了跳转登录页，必须返回false或UrlTree，阻止原路由跳转。
2. 适配异步状态判断：当前AuthService的isLoggedIn()返回同步值，若用户状态是异步更新的，建议改为返回Observable，让守卫支持异步场景：

// AuthService中修改isLoggedIn方法
isLoggedIn(): Observable<boolean> {
  return this.isLogged.asObservable();
}

// AuthGuard中更新逻辑
canActivate(
  next: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
  return this.authService.isLoggedIn().pipe(
    map(isLogged => {
      if (!isLogged) {
        return this.router.createUrlTree(['login']);
      }
      return true;
    })
  );
}

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