NullInjectorError: No provider for _HttpClient

Question

Hey everyone so I am new to Angular i am stuck at this error :

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)

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")
        }
      });
  }



}

On the internet the only solution I got was to import HttpClientModule in app.module.ts but in my project there's no such file.

Project Structure

although i have added it in my app.component.ts

so please help me!

Answer 1

I had exactly the same error the solution is to provide http component inside your app.configs.ts as shown in below

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()]
};

as you can see I used the

provideHttpClient()

method inside the providers list and it will fix your problem.

Answer 2

Thanks man, I had the same problem and I solved it by following the answer from this question.

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()]
};