CODEWITHSUNDEEP
angular
Tavinker
Tavinker

Reputation: 21

I'm getting this error: ERROR NullInjectorError: R3InjectorError(Standalone[_AppComponent])[_ApiService -> _ApiService -> _HttpClient -> _HttpClient]

I have configured my ApiService with the HTTPClient and HttpHeaders and I am also using an Angular dependency injection to provide the HttpClient. But I kept encountering the same errors.

I've already checked that the BrowserModule, AppRoutingModule and HttpClientModule imports were imported correctly and everything appears to be ok.

Error Picture:

ERROR: NullInjectorError: R3InjectorError(Standalone[_AppComponent])[_ApiService -> _ApiService -> _HttpClient -> _HttpClient]:



My api.service.ts file:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  baseUrl = 'http://localhost:8000/';
  httpHeaders = new HttpHeaders({'Content-Type': 'application/json'});

  constructor(private http: HttpClient) { }

  getAllMembers() : Observable<any> {
    return this.http.get(this.baseUrl + 'members/',
    {headers: this.httpHeaders}
    );
  };
}



My app-routing.module.ts file:

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from '@angular/router';
import { MembersDetailComponent } from './members-detail/members-detail.component';
import { NewMemberComponent } from './new-member/new-member.component';



const routes: Routes = [
    { path: 'member-detail/:id', component: MembersDetailComponent},
    { path: 'new-member', component: NewMemberComponent}
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents = [ MembersDetailComponent, ]



My app.module.ts file:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from "./app.component";
import { HttpClientModule } from '@angular/common/http';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        HttpClientModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

My project structure picture:

I would like to understand what could be causing this error in my code, making it impossible for me to communicate with my frontend

Upvotes: 1

Views: 5459

Answers (3)

Michel Enyegue
Michel Enyegue

Reputation: 11

Just provide HttpClient in config.ts

Upvotes: 1

ronin hawkeye
ronin hawkeye

Reputation: 41

import provideHttpClient to your "app.config.ts" file.

import { provideHttpClient } from '@angular/common/http';

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

Upvotes: 3

Christian IRADUKUNDA
Christian IRADUKUNDA

Reputation: 1

in the app.component.ts add this providers:[ApiService] to create the instance of the service

Upvotes: 0

Related Questions