NullInjectorError：没有 _HttpClient 的提供者

Question

大家好，我是 Angular 的新手，我遇到了这个错误：

\n

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

\n

应用程序组件.ts

\n

import { Component } from \'@angular/core\';\nimport { CommonModule } from \'@angular/common\';\nimport { RouterOutlet } from \'@angular/router\';\nimport {FormComponent} from "./component/form/form.component";\nimport {HttpClientModule} from "@angular/common/http";\n\n@Component({\n  selector: \'app-root\',\n  standalone: true,\n  imports: [CommonModule, RouterOutlet, FormComponent, HttpClientModule],\n  templateUrl: \'./app.component.html\',\n  styleUrl: \'./app.component.css\'\n})\nexport class AppComponent {\n  title = \'bakra\';\n}\n

\n

api-调用-service.service.ts

\n

import { Injectable } from \'@angular/core\';\nimport {HttpClient} from "@angular/common/http";\nimport {User} from "../model/user";\n\n@Injectable({\n  providedIn: \'root\'\n})\nexport class ApiCallServiceService {\n\n  constructor(private httpClient : HttpClient) { }\n\n  postUserDetails(user:User, file:File){\n    let formData = new FormData();\n    formData.append("file", file);\n    formData.append("content", JSON.stringify(user));\n    return this.httpClient.post("http://localhost:8080//user/addUser", formData);\n  }\n}\n\n

\n

表单组件.ts

\n

import { Component, OnInit } from \'@angular/core\';\nimport { JsonPipe } from \'@angular/common\';\nimport {User} from "../../model/user";\nimport {FormsModule} from "@angular/forms";\nimport {ApiCallServiceService} from "../../services/api-call-service.service";\nimport {HttpClientModule} from "@angular/common/http";\n\n@Component({\n  selector: \'app-form\',\n  standalone: true,\n  imports: [JsonPipe, FormsModule, HttpClientModule],\n  templateUrl: \'./form.component.html\',\n  styleUrl: \'./form.component.css\'\n})\n\nexport class FormComponent implements OnInit{\n\n  ngOnInit(): void {\n  }\n\n  user = new User("","","","");\n\n  private file! : File;\n\n  constructor(private apiService: ApiCallServiceService) {\n  }\n\n  onFieldChange(event:any){\n      this.file = event.target.files[0];\n      console.log(this.file);\n      this.user.imageName = this.file.name;\n  }\n\n  onClick(){\n      this.apiService.postUserDetails(this.user, this.file).subscribe({\n        next:(response)=>{\n          console.log(response);\n          alert("done")\n        },\n        error:(error)=>{\n          console.log(error)\n          alert("error")\n        },\n        complete:()=>{\n          alert("success")\n        }\n      });\n  }\n\n\n\n}\n\n

\n

在互联网上，我得到的唯一解决方案是在 app.module.ts 中导入 HttpClientModule，但在我的项目中没有这样的文件。

\n

项目结构

\n

虽然我已将其添加到我的 app.component.ts 中

\n

所以请帮助我！

\n

Answer 1

我遇到了完全相同的错误，解决方案是在 app.configs.ts 中提供 http 组件，如下所示

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideClientHydration(), provideHttpClient()]
};

正如你所看到的，我用了

提供HttpClient()

提供者列表中的方法，它将解决您的问题。