Angular 16注入含HttpClient的服务时Auth Guard报Null Injector错误

核心问题：函数式守卫的注入方式错误 #

CanActivateFn是Angular 14+引入的函数式守卫，和传统类守卫的注入逻辑完全不同——不能通过constructor注入依赖，必须使用inject()函数在守卫函数内部获取实例。

错误写法示例 #

// 错误：类守卫的写法不适用于CanActivateFn
export const authGuard: CanActivateFn = (route, state) => {
  constructor(private authService: AuthService) {} // 此处会触发注入错误
  // ...
};

正确写法示例 #

import { CanActivateFn, Router } from '@angular/router';
import { inject } from '@angular/core';
import { AuthService } from './auth.service';

export const authGuard: CanActivateFn = (route, state) => {
  // 使用inject()函数获取依赖实例
  const authService = inject(AuthService);
  const router = inject(Router);

  if (authService.isAuthenticated()) {
    return true;
  }
  router.navigate(['/login']);
  return false;
};

检查AuthService的提供范围 #

确保AuthService被正确注册到Angular的依赖注入系统：

• 优先使用providedIn: 'root'实现全局单例提供，无需在模块中重复声明：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  constructor(private http: HttpClient) {}

  isAuthenticated(): boolean {
    // 示例逻辑：检查本地存储中的认证token
    return !!localStorage.getItem('auth_token');
  }
}

• 如果未使用providedIn: 'root'，必须在使用Guard的模块（如AppModule）的providers数组中声明AuthService。

确认模块依赖完整性 #

1. 确保使用Guard的模块（如AppModule）导入了HttpClientModule，因为AuthService依赖HttpClient：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'; // 必须导入
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule, AppRoutingModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

2. 确保路由配置中正确引用守卫，无路径或拼写错误：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { authGuard } from './auth.guard'; // 路径需正确
import { ProtectedComponent } from './protected/protected.component';

const routes: Routes = [
  {
    path: 'protected',
    component: ProtectedComponent,
    canActivate: [authGuard] // 正确引用函数式守卫
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

排查循环依赖 #

如果AuthService依赖某个间接依赖Guard的服务，会触发循环依赖导致注入失败：

• 检查AuthService的导入项，确认没有引入依赖Guard的模块/服务
• 使用Angular DevTools查看依赖树，定位循环依赖节点

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