Angular 18添加provideHttpClient()仍未解决NullInjectorError问题

我用Promise结合fetch能正常从后端获取数据，但换成HttpClient服务实现时却报错，查阅过往回答后仍未解决。

相关代码 #

app.config.ts #

import {ApplicationConfig} from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
export const appConfig: ApplicationConfig = {
  providers: [provideHttpClient()],
};

housing.service.ts #

export class HousingService {
  url = "http://localhost:5150"
  protected homeLocationList2: HomeLocation[] = [];
  
  constructor(private http:HttpClient) { 
  }

  getAllProduct(): Observable<HomeLocation[]>{
    const response = this.http.get<HomeLocation[]>(`${this.url}/Home/AllProduct`)
    return response 
  }
}

Home.Component.ts #

export class HomeComponent {
  productList:HomeLocation[] = [];
  housingService: HousingService = inject(HousingService)

  constructor(){
    this.housingService.getAllProduct().subscribe(data=>{
      this.productList = data;
    })
  }
}

报错信息 #

ERROR NullInjectorError: NullInjectorError: No provider for _HttpClient!
    at NullInjector.get (core.mjs:1632:21)
    at R3Injector.get (core.mjs:3014:27)
    at R3Injector.get (core.mjs:3014:27)
    at injectInjectorOnly (core.mjs:1095:36)
    at Module.ɵɵinject (core.mjs:1101:40)
    at Object.HousingService_Factory [as factory] (housing.service.ts:8:28)
    at core.mjs:3132:35
    at runInInjectorProfilerContext (core.mjs:866:5)
    at R3Injector.hydrate (core.mjs:3131:11)
    at R3Injector.get (core.mjs:3005:23)

解决办法 #

1. 注册HousingService为根级服务
   给HousingService添加@Injectable({ providedIn: 'root' })装饰器，让Angular自动将其注册为全局可用的服务，避免依赖注入找不到提供者：

   import { Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   import { Observable } from 'rxjs';
   import { HomeLocation } from './your-path-to-homelocation'; // 确保导入实体类路径正确
   
   @Injectable({
     providedIn: 'root'
   })
   export class HousingService {
     url = "http://localhost:5150"
     protected homeLocationList2: HomeLocation[] = [];
     
     constructor(private http:HttpClient) { }
   
     getAllProduct(): Observable<HomeLocation[]>{
       return this.http.get<HomeLocation[]>(`${this.url}/Home/AllProduct`);
     }
   }
   

2. 确认HttpClient的提供方式匹配应用模式

   • 若使用Angular 14+独立组件模式：确保app.config.ts中的provideHttpClient()已正确配置，且应用通过bootstrapApplication使用该配置。
   • 若使用传统NgModule模式：在根模块（如AppModule）中导入HttpClientModule并添加到imports数组：

     import { HttpClientModule } from '@angular/common/http';
     
     @NgModule({
       imports: [HttpClientModule],
       // 其他模块配置
     })
     export class AppModule { }
     

3. 规范组件的服务注入方式
   若组件为非独立组件，建议直接在构造函数中注入服务，替代inject()方法，确保依赖注入链路完整：

   export class HomeComponent {
     productList:HomeLocation[] = [];
     
     constructor(private housingService: HousingService){
       this.housingService.getAllProduct().subscribe(data=>{
         this.productList = data;
       })
     }
   }
   

内容的提问来源于stack exchange，提问作者SAFIQUL ISLAM UZZAL 203-15-144