使用Angular守卫时出现_NullInjectorError: No provider for _HttpClient!错误求助

这个错误的核心原因是：canMatch守卫会在懒加载模块（这里是HeroesModule）加载之前执行，它的注入上下文是根注入器。如果你的HttpClientModule仅在懒加载模块中导入，或者AuthService没有注册到根注入器，根注入器就找不到HttpClient的提供者，从而抛出这个错误。

解决方案： #

1. 确保HttpClientModule在根模块（AppModule）中导入

把HttpClientModule添加到根模块的imports数组里，不要只在懒加载模块中导入：

// app.module.ts
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
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

2. 确保AuthService注册到根注入器

修改AuthService的@Injectable装饰器，设置providedIn: 'root'，这样服务会被自动注册到根注入器，让守卫能够正常注入：

// auth.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root' // 关键：注册到根注入器
})
export class AuthService {
  auth = { id: null }; // 你的业务属性
  constructor(private http: HttpClient) {}
}

如果你的AuthService是通过模块的providers数组提供的，确保这个模块是根模块，或者是被根模块直接导入的模块（不能是懒加载模块）。

为什么移除守卫就正常？ #

移除canMatch守卫后，路由会直接加载懒加载的HeroesModule，此时模块内的HttpClientModule会注册HttpClient的提供者，AuthService在模块内部被注入时就能拿到依赖，所以不会报错。但守卫是在模块加载前执行，根注入器还没有对应的提供者，因此触发了空注入器错误。

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