没有 _HttpClient 的提供者

Question

我正在使用 Angular 17 开发一个个人项目，并且我从应用程序的后端获得了一些设置。但我的 AngularHttpClient不起作用，老实说我不知道​​为什么不起作用。

\n

我得到的错误是这样的：

\n

\n

错误错误 [NullInjectorError]: R3InjectorError(Standalone[_AppComponent])[_GetSettingsService -> _GetSettingsService -> _HttpClient -> _HttpClient]:\nNullInjectorError: 没有 _HttpClient 的提供程序！\nat NullInjector.get (C:\\Users\\user\\文件\\Works\\pip-boy-3000.angular\\vite-root\\pip-boy-3000\\node_modules@angular\\core\\fesm2022\\core.mjs:5465:13)\nat R3Injector。获取（C：\\ Users \\ user \\ Documents \\ Works \\ pip-boy-3000 \\ pip-boy-3000 \\ vite-root \\ pip-boy-3000 \\ node_modules@angular \\ core \\ fesm2022 \\ core.mjs:5916:22)
\nat R3Injector.get (C:\\Users\\user\\Documents\\Works\\pip-boy-3000.angular\\vite-root\\pip-boy-3000\ \node_modules@angular\\core\\fesm2022\\core.mjs:5916:22)
\natjectInjectorOnly (C:\\Users\\user\\Documents\\Works\\pip-boy-3000.angular\\vite -root\\pip-boy-3000\\node_modules@angular\\core\\fesm2022\\core.mjs:912:12)\nat 模块。\xc9\xb5\xc9\xb5inject (C:\\Users\\ user\\Documents\\Works\\pip-boy-3000.angular\\vite-root\\pip-boy-3000\\node_modules@angular\\core\\fesm2022\\core.mjs:998:53)
\ nat Object.GetSettingsService_Factory (C:\\Users\\user\\Documents\\Works\\pip-boy-3000.angular\\vite-root\\pip-boy-3000\\src\\app\\shared\ \services\\get-settings.service.ts:9:32)\nat eval (C:\\Users\\user\\Documents\\Works\\pip-boy-3000.angular\\vite-root\\ pip-boy-3000\\node_modules@angular\\core\\fesm2022\\core.mjs:6028:10)\nat runInInjectorProfilerContext (C:\\Users\\user\\Documents\\Works\\pip-boy- 3000.Angular\\vite-root\\pip-boy-3000\\node_modules@Angular\\core\\fesm2022\\core.mjs:873:5)\nat R3Injector. Hydro (C:\\Users\\user \\Documents\\Works\\pip-boy-3000.angular\\vite-root\\pip-boy-3000\\node_modules@angular\\core\\fesm2022\\core.mjs:6027:11)\nat R3Injector.get (C:\\Users\\user\\Documents\\Works\\pip-boy-3000.angular\\vite-root\\pip-boy-3000\\node_modules@angular\\core\\fesm2022 \\core.mjs:5907:7) {
\nngTempTokenPath: null,\nngTokenPath: [\n'_GetSettingsService',\n'_GetSettingsService',\n'_HttpClient',\n'_HttpClient'\n]\n}\ nError [NullInjectorError]：R3InjectorError（独立[_AppComponent]）[_GetSettingsService - > _GetSettingsService - > _HttpClient - > _HttpClient]：\ nNullInjectorError：没有_HttpClient的提供程序！\ nat NullInjector.get（C：\\ Users \\ user \\ Documents \\Works\\pip-boy-3000.angular\\vite-root\\pip-boy-3000\\node_modules@angular\\core\\fesm2022\\core.mjs:5465:13)\nat R3Injector.get (C:\\Users\\user\\Documents\\Works\\pip-boy-3000.angular\\vite-root\\pip-boy-3000\\node_modules@angular\\core\\fesm2022\\core .mjs:5916:22)
\nat R3Injector.get (C:\\Users\\user\\Documents\\Works\\pip-boy-3000.angular\\vite-root\\pip-boy-3000\\ node_modules@angular\\core\\fesm2022\\core.mjs:5916:22)
\natjectInjectorOnly (C:\\Users\\user\\Documents\\Works\\pip-boy-3000.angular\\vite-root\\pip-boy-3000\\node_modules@angular\\core\\fesm2022 \\core.mjs:912:12)\nat 模块.\xc9\xb5\xc9\xb5inject (C:\\Users\\user\\Documents\\Works\\pip-boy-3000.angular\\vite- root\\pip-boy-3000\\node_modules@angular\\core\\fesm2022\\core.mjs:998:53)
\nat Object.GetSettingsService_Factory (C:\\Users\\user\\Documents\\Works\ \pip-boy-3000.angular\\vite-root\\pip-boy-3000\\src\\app\\shared\\services\\get-settings.service.ts:9:32)\nat eval ( C:\\Users\\user\\Documents\\Works\\pip-boy-3000.angular\\vite-root\\pip-boy-3000\\node_modules@angular\\core\\fesm2022\\core. mjs:6028:10)\nat runInInjectorProfilerContext (C:\\Users\\user\\Documents\\Works\\pip-boy-3000.angular\\vite-root\\pip-boy-3000\\node_modules@angular \\core\\fesm2022\\core.mjs:873:5)\nat R3Injector. Hydro (C:\\Users\\user\\Documents\\Works\\pip-boy-3000.angular\\vite-root \\pip-boy-3000\\node_modules@angular\\core\\fesm2022\\core.mjs:6027:11)\nat R3Injector.get (C:\\Users\\user\\Documents\\Works\\ pip-boy-3000.angular\\vite-root\\pip-boy-3000\\node_modules@angular\\core\\fesm2022\\core.mjs:5907:7) {
\nngTempTokenPath: null,\nngTokenPath: [\n'_GetSettingsService',\n'_GetSettingsService',\n'_HttpClient',\n'_HttpClient'\n]\n}\n14:23:23 [vite] 内部服务器错误: R3InjectorError(Standalone[_AppComponent])[_GetSettingsService -> _GetSettingsService -> _HttpClient -> _HttpClient]:\nNullInjectorError: 没有 _HttpClient 的提供程序！\nat NullInjector.get (C:\\Users\\user\\Documents\\Works\ \pip-boy-3000.angular\\vite-root\\pip-boy-3000\\node_modules@angular\\core\\fesm2022\\co14:23:23 [vite] 内部服务器错误：R3InjectorError(Standalone[_AppComponent) ])[_GetSettingsService -> _GetSettingsService -> _HttpClient -> _HttpClient]:\nNullInjectorError: 没有 _HttpClient 的提供程序！\nat NullInjector.get (C:\\Users\\user\\Documents\\Works\\pip-boy-3000 .angular\\vite-root\\pip-boy-3000\\node_modules@angular\\core\\fesm2022\\core.mjs:5465:13)\nat R3Injector.get (C:\\Users\\user\ \Documents\\Works\\pip-boy-3000.angular\\vite-root\\pip-boy-3000\\node_modules@angular\\core\\fesm2022\\core.mjs:5916:22)\nat R3Injector .get (C:\\Users\\user\\Documents\\Works\\pip-boy-3000.angular\\vite-root\\pip-boy-3000\\node_modules@angular\\core\\fesm2022\ \core.mjs:5916:22)\natjectInjectorOnly (C:\\Users\\user\\Documents\\Works\\pip-boy-3000.angular\\vite-root\\pip-boy-3000\\ node_modules@angular\\core\\fesm2022\\core.mjs:912:12)\nat 模块。\xc9\xb5\xc9\xb5inject (C:\\Users\\user\\Documents\\Works\\pip- boy-3000.angular\\vite-root\\pip-boy-3000\\node_modules@angular\\core\\fesm2022\\core.mjs:998:53)\nat Object.GetSettingsService_Factory (C:\\Users\ \user\\Documents\\Works\\pip-boy-3000.angular\\vite-root\\pip-boy-3000\\src\\app\\shared\\services\\get-settings.service.ts :9:32)\nat eval (C:\\Users\\user\\Documents\\Works\\pip-boy-3000.angular\\vite-root\\pip-boy-3000\\node_modules@angular\ \core\\fesm2022\\core.mjs:6028:10)\nat runInInjectorProfilerContext (C:\\Users\\user\\Documents\\Works\\pip-boy-3000.angular\\vite-root\\pip -boy-3000\\node_modules@angular\\core\\fesm2022\\core.mjs:873:5)\nat R3Injector. Hydro (C:\\Users\\user\\Documents\\Works\\pip-boy -3000.angular\\vite-root\\pip-boy-3000\\node_modules@angular\\core\\fesm2022\\core.mjs:6027:11)\nat R3Injector.get (C:\\Users\\ user\\Documents\\Works\\pip-boy-3000.angular\\vite-root\\pip-boy-3000\\node_modules@angular\\core\\fesm2022\\core.mjs:5907:7) ( x2)

\n

\n

我的 app.component.ts ：

\n

import { GetSettingsService } from './shared/services/get-settings.service';\nimport { NavheaderComponent } from './components/navheader/navheader.component';\nimport { Component, NgModule, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { RouterOutlet } from '@angular/router';\nimport { ConfigComponent } from './components/config/config.component';\nimport { TerminalComponent } from './components/terminal/terminal.component';\nimport { StaticEffectComponent } from './components/static-effect/static-effect.component';\nimport { UserConfig } from './shared/models/userConfigs.model';\nimport { HttpClientModule } from '@angular/common/http';\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [\n    CommonModule,\n    RouterOutlet,\n    NavheaderComponent,\n    ConfigComponent,\n    TerminalComponent,\n    StaticEffectComponent,\n  ],\n  providers: [\n    HttpClientModule\n  ],\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss']\n})\nexport class AppComponent implements OnInit {\n  title = 'pip-boy-3000';\n\n  constructor(private getSettingsService: GetSettingsService) {}\n\n\n  //Ambient Variables\n  public userConfig: UserConfig = new UserConfig();\n\n\n  //Used for activating the Config Panel;\n  public configIsActivated: boolean = false;\n  public noisyBackground: boolean = true;\n\n  public setNoisyBackground(e: boolean) {\n    this.noisyBackground = e;\n  }\n\n  public activateOrDeactivateConfig(e: any): void {\n    console.log(e);\n    this.configIsActivated = e;\n  }\n\n  ngOnInit(): void {\n    this.getSettingsService.getSettingsInfos(1).subscribe({\n      error: () => {\n        console.log("error")\n      },\n      next: (data: UserConfig) => {\n        this.userConfig = data;\n      }\n    })\n  }\n}\n\n

\n

我的服务

\n

import { HttpClient } from '@angular/common/http';\nimport { Injectable } from '@angular/core';\nimport { Observable } from 'rxjs';\nimport { UserConfig } from '../models/userConfigs.model';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class GetSettingsService {\n\n  constructor(private httpClient: HttpClient) { }\n\n  public getSettingsInfos(userId: number): Observable<UserConfig> {\n    return this.httpClient.get<UserConfig>(`/settings/${userId}`);\n  }\n}\n

\n

我多次尝试改变一些东西，创建模块和其他类型的东西，但我不知道我能做什么

\n

编辑

\n

我还将 HttpClientModule 的位置从提供者更改为导入，但随后出现此错误：

\n

ERROR Error [NullInjectorError]: R3InjectorError(Standalone[_AppComponent])[_GetSettingsService -> _GetSettingsService -> _HttpClient -> _HttpClient]: \n  NullInjectorError: No provider for _HttpClient!\n    at NullInjector.get (C:\\Users\\user\\Documents\\Works\\pip-boy-3000\\.angular\\vite-root\\pip-boy-3000\\node_modules\\@angular\\core\\fesm2022\\core.mjs:5465:13)\n    at R3Injector.get (C:\\Users\\user\\Documents\\Works\\pip-boy-3000\\.angular\\vite-root\\pip-boy-3000\\node_modules\\@angular\\core\\fesm2022\\core.mjs:5916:22)\n    at R3Injector.get (C:\\Users\\user\\Documents\\Works\\pip-boy-3000\\.angular\\vite-root\\pip-boy-3000\\node_modules\\@angular\\core\\fesm2022\\core.mjs:5916:22)\n    at injectInjectorOnly (C:\\Users\\user\\Documents\\Works\\pip-boy-3000\\.angular\\vite-root\\pip-boy-3000\\node_modules\\@angular\\core\\fesm2022\\core.mjs:912:12)\n    at Module.\xc9\xb5\xc9\xb5inject (C:\\Users\\user\\Documents\\Works\\pip-boy-3000\\.angular\\vite-root\\pip-boy-3000\\node_modules\\@angular\\core\\fesm2022\\core.mjs:998:53)\n    at Object.GetSettingsService_Factory (C:\\Users\\user\\Documents\\Works\\pip-boy-3000\\.angular\\vite-root\\pip-boy-3000\\src\\app\\shared\\services\\get-settings.service.ts:9:32)\n    at eval (C:\\Users\\user\\Documents\\Works\\pip-boy-3000\\.angular\\vite-root\\pip-boy-3000\\node_modules\\@angular\\core\\fesm2022\\core.mjs:6028:10)\n    at runInInjectorProfilerContext (C:\\Users\\user\\Documents\\Works\\pip-boy-3000\\.angular\\vite-root\\pip-boy-3000\\node_modules\\@angular\\core\\fesm2022\\core.mjs:873:5)\n    at R3Injector.hydrate (C:\\Users\\user\\Documents\\Works\\pip-boy-3000\\.angular\\vite-root\\pip-boy-3000\\node_modules\\@angular\\core\\fesm2022\\core.mjs:6027:11)\n    at R3Injector.get (C:\\Users\\user\\Documents\\Works\\pip-boy-3000\\.angular\\vite-root\\pip-boy-3000\\node_modules\\@angular\\core\\fesm2022\\core.mjs:5907:7) {\n  ngTempTokenPath: null,\n  ngTokenPath: [\n    '_GetSettingsService',\n    '_GetSettingsService',\n    '_HttpClient',\n    '_HttpClient'\n  ]\n}\nError [NullInjectorError]: R3InjectorError(Standalone[_AppComponent])[_GetSettingsService -> _GetSettingsService -> _HttpClient -> _HttpClient]: \n  NullInjectorError: No provider for _HttpClient!\n    at NullInjector.get (C:\\Users\\user\\Documents\\Works\\pip-boy-3000\\.angular\\vite-root\\pip-boy-3000\\node_modules\\@angular\\core\\fesm2022\\core.mjs:5465:13)\n    at R3Injector.get (C:\\Users\\user\\Documents\\Works\\pip-boy-3000\\.angular\\vite-root\\pip-boy-3000\\node_modules\\@angular\\core\\fesm2022\\core.mjs:5916:22)\n    at R3Injector.get (C:\\Users\\user\\Documents\\Works\\pip-boy-3000\\.angular\\vite-root\\pip-boy-3000\\node_modules\\@angular\\core\\fesm2022\\core.mjs:5916:22)\n    at injectInjectorOnly (C:\\Users\\user\\Documents\\Works\\pip-boy-3000\\.angular\\vite-root\\pip-boy-3000\\node_modules\\@angular\\core\\fesm2022\\core.mjs:912:12)\n    at Module.\xc9\xb5\xc9\xb5inject (C:\\Users\\user\\Documents\\Works\\pip-boy-3000\\.angular\\vite-root\\pip-boy-3000\\node_modules\\@angular\\core\\fesm2022\\core.mjs:998:53)\n    at Object.GetSettingsService_Factory (C:\\Users\\user\\Documents\\Works\\pip-boy-3000\\.angular\\vite-root\\pip-boy-3000\\src\\app\\shared\\services\\get-settings.service.ts:9:32)\n    at eval (C:\\Users\\user\\Documents\\Works\\pip-boy-3000\\.angular\\vite-root\\pip-boy-3000\\node_modules\\@angular\\core\\fesm2022\\core.mjs:6028:10)\n    at runInInjectorProfilerContext (C:\\Users\\user\\Documents\\Works\\pip-boy-3000\\.angular\\vite-root\\pip-boy-3000\\node_modules\\@angular\\core\\fesm2022\\core.mjs:873:5)\n    at R3Injector.hydrate (C:\\Users\\user\\Documents\\Works\\pip-boy-3000\\.angular\\vite-root\\pip-boy-3000\\node_modules\\@angular\\core\\fesm2022\\core.mjs:6027:11)\n    at R3Injector.get (C:\\Users\\user\\Documents\\Works\\pip-boy-3000\\.angular\\vite-root\\pip-boy-3000\\node_modules\\@angular\\core\\fesm2022\\core.mjs:5907:7) {\n  ngTempTokenPath: null,\n  ngTokenPath: [\n    '_GetSettingsService',\n    '_GetSettingsService',\n    '_HttpClient',\n    '_HttpClient'\n  ]\n}\n16:37:53 [vite] Internal server error: R3InjectorError(Standalone[_AppComponent])[_GetSettingsService -> _GetSettingsService -> _HttpClient -> _HttpClient]: \n  NullInjectorError: No provider for _HttpClient!\n      at NullInjector.get (C:\\Users\\user\\Documents\\Works\\pip-boy-3000\\.angular\\vite-root\\pip-boy-3000\\node_modules\\@angular\\core\\fesm2022\\core.mjs:5465:13)\n      at R3Injector.get (C:\\Users\\user\\Documents\\Works\\pip-boy-3000\\.angular\\vite-root\\pip-boy-3000\\node_modules\\@angular\\core\\fesm2022\\core.mjs:5916:22)\n      at R3Injector.get (C:\\Users\\user\\Documents\\Works\\pip-boy-3000\\.angular\\vite-root\\pip-boy-3000\\node_modules\\@angular\\core\\fesm2022\\core.mjs:5916:22)\n      at injectInjectorOnly (C:\\Users\\user\\Documents\\Works\\pip-boy-3000\\.angular\\vite-root\\pip-boy-3000\\node_modules\\@angular\\core\\fesm2022\\core.mjs:912:12)\n      at Module.\xc9\xb5\xc9\xb5inject (C:\\Users\\user\\Documents\\Works\\pip-boy-3000\\.angular\\vite-root\\pip-boy-3000\\node_modules\\@angular\\core\\fesm2022\\core.mjs:998:53)\n      at Object.GetSettingsService_Factory (C:\\Users\\user\\Documents\\Works\\pip-boy-3000\\.angular\\vite-root\\pip-boy-3000\\src\\app\\shared\\services\\get-settings.service.ts:9:32)\n      at eval (C:\\Users\\user\\Documents\\Works\\pip-boy-3000\\.angular\\vite-root\\pip-boy-3000\\node_modules\\@angular\\core\\fesm2022\\core.mjs:6028:s:6028:10)\n      at runInInjectorProfilerContext (C:\\Users\\user\\Documents\\Works\\pip-boy-3000\\.angular\\vite-root\\pip-boy-3000\\node_modules\\@angular\\core\\fesm2022\\core.mjs:873:5)\n      at R3Injector.hydrate (C:\\Users\\user\\Documents\\Works\\pip-boy-3000\\.angular\\vite-root\\pip-boy-3000\\node_modules\\@angular\\core\\fesm2022\\core.mjs:6027:11)\n      at R3Injector.get (C:\\Users\\user\\Documents\\Works\\pip-boy-3000\\.angular\\vite-root\\pip-boy-3000\\node_modules\\@angular\\core\\fesm2022\\core.mjs:5907:7)\n

\n

Answer 1

我一直在处理同样的问题，直到我仔细查看了angular.dev 上的新文档，它告诉您如何提供HttpClient给独立应用程序：

HttpClient是使用provideHttpClient帮助函数提供的，大多数应用程序都将其包含providers在main.ts.

boostrapApplication(App, {providers: [
  provideHttpClient(),
]});

最后，由于您正在处理的是一个独立的应用程序，因此导入HttpClientModule不会执行任何让 AngularHttpClient向您的应用程序提供的操作，因此您可以随意删除HttpClientModule导入app.component.ts。

Answer 2

对我来说，解决方案是将“provideHttpClient()”行放入名为“app.config.ts”的文件中。我正在使用 Angular 17.0.5