Angular独立组件项目遇NullInjectorError: No provider for _HttpClient求助

错误信息 #

ERROR NullInjectorError: R3InjectorError(Standalone[_AppComponent])[_ApiCallServiceService -> _ApiCallServiceService -> _HttpClient -> _HttpClient]: 
  NullInjectorError: No provider for _HttpClient!
    at NullInjector.get (core.mjs:5605:27)
    at R3Injector.get (core.mjs:6048:33)
    at R3Injector.get (core.mjs:6048:33)
    at injectInjectorOnly (core.mjs:911:40)
    at Module.ɵɵinject (core.mjs:917:42)
    at Object.ApiCallServiceService_Factory [as factory] (api-call-service.service.ts:8:35)
    at core.mjs:6168:43
    at runInInjectorProfilerContext (core.mjs:867:9)
    at R3Injector.hydrate (core.mjs:6167:17)
    at R3Injector.get (core.mjs:6037:33)

问题背景 #

作为Angular新手，在独立组件项目中遇到上述错误。已在app.component.ts中导入HttpClientModule，但网上方案多要求导入到app.module.ts，而项目中没有该文件。

相关代码 #

app.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import {FormComponent} from "./component/form/form.component";
import {HttpClientModule} from "@angular/common/http";

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, FormComponent, HttpClientModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'bakra';
}

api-call-service.service.ts

import { Injectable } from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {User} from "../model/user";

@Injectable({
  providedIn: 'root'
})
export class ApiCallServiceService {

  constructor(private httpClient : HttpClient) { }

  postUserDetails(user:User, file:File){
    let formData = new FormData();
    formData.append("file", file);
    formData.append("content", JSON.stringify(user));
    return this.httpClient.post("http://localhost:8080//user/addUser", formData);
  }
}

form.component.ts

import { Component, OnInit } from '@angular/core';
import { JsonPipe } from '@angular/common';
import {User} from "../../model/user";
import {FormsModule} from "@angular/forms";
import {ApiCallServiceService} from "../../services/api-call-service.service";
import {HttpClientModule} from "@angular/common/http";

@Component({
  selector: 'app-form',
  standalone: true,
  imports: [JsonPipe, FormsModule, HttpClientModule],
  templateUrl: './form.component.html',
  styleUrl: './form.component.css'
})

export class FormComponent implements OnInit{

  ngOnInit(): void {
  }

  user = new User("","","","")

  private file! : File;

  constructor(private apiService: ApiCallServiceService) {
  }

  onFieldChange(event:any){
      this.file = event.target.files[0];
      console.log(this.file);
      this.user.imageName = this.file.name;
  }

  onClick(){
      this.apiService.postUserDetails(this.user, this.file).subscribe({
        next:(response)=>{
          console.log(response);
          alert("done")
        },
        error:(error)=>{
          console.log(error)
          alert("error")
        },
        complete:()=>{
          alert("success")
        }
      });
  }
}

解决方法 #

在独立组件项目中，HttpClientModule需要在应用根注入器中提供，而非仅在组件的imports数组中导入。因为你的服务使用providedIn: 'root'注册，属于根注入器，所以根注入器必须能访问HttpClient的提供者。

步骤1：在main.ts中全局提供HttpClientModule

修改main.ts，通过importProvidersFrom将HttpClientModule添加到根注入器的提供者列表：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { importProvidersFrom } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(HttpClientModule)
  ]
}).catch(err => console.error(err));

步骤2：移除组件中的HttpClientModule导入

无论是app.component.ts还是form.component.ts，都不需要在组件的imports数组中添加HttpClientModule——组件imports仅用于模板指令/管道的引入，服务依赖的提供者需在注入器层面配置。

额外修复

form.component.ts中user = new User("","","","")原代码缺少闭合括号，已在上述代码中修正，该语法错误可能引发其他异常。

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