Hello everyone, I am new to Angular and currently facing an issue that has me stuck. The error message I'm receiving is as follows:
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)
In my app.component.ts file:
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';
}
In my api-call-service.service.ts file:
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);
}
}
In my form.component.ts file:
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")
}
});
}
}
The only solution I found online was to import HttpClientModule in app.module.ts, but I don't have that file in my project structure as shown here. Even though I have added it in my app.component.ts file. Any help would be greatly appreciated!