angularhttp

No provider for _HttpClient

I'm working on a personal project with Angular 17, and there are some settings that I get from the backend of my application. But my Angular HttpClient does not work and honestly I don't know why not.

The error that I get is this:

ERROR Error [NullInjectorError]: R3InjectorError(Standalone[_AppComponent])[_GetSettingsService -> _GetSettingsService -> _HttpClient -> _HttpClient]: NullInjectorError: No provider for _HttpClient! 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) 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)
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)
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) at Module.ɵɵinject (C:\Users\user\Documents\Works\pip-boy-3000.angular\vite-root\pip-boy-3000\node_modules@angular\core\fesm2022\core.mjs:998:53)
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) 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) 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) 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) 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) {
ngTempTokenPath: null, ngTokenPath: [ '_GetSettingsService', '_GetSettingsService', '_HttpClient', '_HttpClient' ] } Error [NullInjectorError]: R3InjectorError(Standalone[_AppComponent])[_GetSettingsService -> _GetSettingsService -> _HttpClient -> _HttpClient]: NullInjectorError: No provider for _HttpClient! 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) 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)
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)
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) at Module.ɵɵinject (C:\Users\user\Documents\Works\pip-boy-3000.angular\vite-root\pip-boy-3000\node_modules@angular\core\fesm2022\core.mjs:998:53)
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) 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) 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) 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) 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) {
ngTempTokenPath: null, ngTokenPath: [ '_GetSettingsService', '_GetSettingsService', '_HttpClient', '_HttpClient' ] } 14:23:23 [vite] Internal server error: R3InjectorError(Standalone[_AppComponent])[_GetSettingsService -> _GetSettingsService -> _HttpClient -> _HttpClient]: NullInjectorError: No provider for _HttpClient! at 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] Internal server error: R3InjectorError(Standalone[_AppComponent])[_GetSettingsService -> _GetSettingsService -> _HttpClient -> _HttpClient]: NullInjectorError: No provider for _HttpClient! 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) 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) 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) 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) at Module.ɵɵinject (C:\Users\user\Documents\Works\pip-boy-3000.angular\vite-root\pip-boy-3000\node_modules@angular\core\fesm2022\core.mjs:998:53) 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) 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) 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) 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) 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) (x2)

My app.component.ts :

import { GetSettingsService } from './shared/services/get-settings.service';
import { NavheaderComponent } from './components/navheader/navheader.component';
import { Component, NgModule, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { ConfigComponent } from './components/config/config.component';
import { TerminalComponent } from './components/terminal/terminal.component';
import { StaticEffectComponent } from './components/static-effect/static-effect.component';
import { UserConfig } from './shared/models/userConfigs.model';
import { HttpClientModule } from '@angular/common/http';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    CommonModule,
    RouterOutlet,
    NavheaderComponent,
    ConfigComponent,
    TerminalComponent,
    StaticEffectComponent,
  ],
  providers: [
    HttpClientModule
  ],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'pip-boy-3000';

  constructor(private getSettingsService: GetSettingsService) {}


  //Ambient Variables
  public userConfig: UserConfig = new UserConfig();


  //Used for activating the Config Panel;
  public configIsActivated: boolean = false;
  public noisyBackground: boolean = true;

  public setNoisyBackground(e: boolean) {
    this.noisyBackground = e;
  }

  public activateOrDeactivateConfig(e: any): void {
    console.log(e);
    this.configIsActivated = e;
  }

  ngOnInit(): void {
    this.getSettingsService.getSettingsInfos(1).subscribe({
      error: () => {
        console.log("error")
      },
      next: (data: UserConfig) => {
        this.userConfig = data;
      }
    })
  }
}

My service

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { UserConfig } from '../models/userConfigs.model';

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

  constructor(private httpClient: HttpClient) { }

  public getSettingsInfos(userId: number): Observable<UserConfig> {
    return this.httpClient.get<UserConfig>(`/settings/${userId}`);
  }
}

i tried multiple times changing some things, creating modules and other sort of things, and i dont know what can i do

EDIT

Ive also changed the location of the HttpClientModule from providers to imports, but then this error comes in:

ERROR Error [NullInjectorError]: R3InjectorError(Standalone[_AppComponent])[_GetSettingsService -> _GetSettingsService -> _HttpClient -> _HttpClient]: 
  NullInjectorError: No provider for _HttpClient!
    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)
    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)
    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)
    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)
    at Module.ɵɵinject (C:\Users\user\Documents\Works\pip-boy-3000\.angular\vite-root\pip-boy-3000\node_modules\@angular\core\fesm2022\core.mjs:998:53)
    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)
    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)
    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)
    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)
    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) {
  ngTempTokenPath: null,
  ngTokenPath: [
    '_GetSettingsService',
    '_GetSettingsService',
    '_HttpClient',
    '_HttpClient'
  ]
}
Error [NullInjectorError]: R3InjectorError(Standalone[_AppComponent])[_GetSettingsService -> _GetSettingsService -> _HttpClient -> _HttpClient]: 
  NullInjectorError: No provider for _HttpClient!
    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)
    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)
    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)
    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)
    at Module.ɵɵinject (C:\Users\user\Documents\Works\pip-boy-3000\.angular\vite-root\pip-boy-3000\node_modules\@angular\core\fesm2022\core.mjs:998:53)
    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)
    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)
    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)
    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)
    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) {
  ngTempTokenPath: null,
  ngTokenPath: [
    '_GetSettingsService',
    '_GetSettingsService',
    '_HttpClient',
    '_HttpClient'
  ]
}
16:37:53 [vite] Internal server error: R3InjectorError(Standalone[_AppComponent])[_GetSettingsService -> _GetSettingsService -> _HttpClient -> _HttpClient]: 
  NullInjectorError: No provider for _HttpClient!
      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)
      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)
      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)
      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)
      at Module.ɵɵinject (C:\Users\user\Documents\Works\pip-boy-3000\.angular\vite-root\pip-boy-3000\node_modules\@angular\core\fesm2022\core.mjs:998:53)
      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)
      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)
      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)
      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)
      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)
Solution

  • I was dealing with the same issue until I had a close look at the new documentation here at angular.dev, which tells you how to provide HttpClient to a standalone app:

    HttpClient is provided using the provideHttpClient helper function, which most apps include in the application providers in main.ts.

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

    Lastly, since it's a standalone app you're dealing with, importing HttpClientModule doesn't do anything that would've made Angular provide HttpClient to your app to begin with, so feel free to remove the HttpClientModule import from app.component.ts afterwards.