Angular创建AuthGuard路由守卫时报TS2322等三类错误如何解决？

1. 修复app.module.ts的Providers配置错误 #

原代码错误将AuthService塞入了HTTP拦截器的配置对象内，不符合Angular Provider的语法规范，修改后代码：

providers: [
  AuthService, // 单独作为Provider项，不要放在拦截器配置对象中
  {
    provide: HTTP_INTERCEPTORS,
    useClass: AuthInterceptor,
    multi: true
  }
]

拦截器配置对象仅允许provide/useClass/multi等标准属性，额外添加的AuthService属于非法属性，直接触发TS2322报错。由于AuthService和TokenService都声明了providedIn: 'root'，也可以直接移除Providers数组中的AuthService声明，Angular会自动完成注入。

2. 修复auth-guard.guard.ts的导入与逻辑错误 #

原代码存在两个核心问题：

• 错误从token.service.ts导入不存在的AuthService
• 调用的isLoggedIn()方法实际由TokenService提供，而非AuthService
• 类名AuthGuardGuard命名冗余，和路由模块的导入名不匹配

修改后完整代码：

import { Injectable } from '@angular/core';
import { CanActivate, Router  } from '@angular/router';
import { TokenService } from '../../shared/token.service'; // 导入正确的服务

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate { // 类名改为和路由导入一致的命名
  constructor(private _tokenService: TokenService, private _router: Router) { }
  canActivate(): boolean {
    if (this._tokenService.isLoggedIn()) { // 调用TokenService提供的登录校验方法
        return true;
    } else {
        this._router.navigate(['/login'])
        return false
    }
  }
}

上述修改直接解决TS2305和NG2003报错：导入的服务存在且是合法的可注入类，Angular可以自动匹配注入令牌，无需额外添加@Inject装饰器。

3. 可选校验路由配置 #

如果保留原Guard类名AuthGuardGuard，需要同步修改app-routing.module.ts的导入语句：

import { AuthGuardGuard as AuthGuard } from './auth/guard/auth-guard.guard';

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