Angular Error Message in Developer Console - Stack Overflow

In my developer console I am getting this error:

NullInjectorError: R3InjectorError(Standalone[_AppComponent])[_ProductService -> _ProductService -> _HttpClient -> _HttpClient]: 
  NullInjectorError: No provider for _HttpClient!
    at NullInjector.get (core.mjs:1644:21)
    at R3Injector.get (core.mjs:2169:27)
    at R3Injector.get (core.mjs:2169:27)
    at injectInjectorOnly (core.mjs:1100:36)
    at Module.ɵɵinject (core.mjs:1106:40)
    at Object.ProductService_Factory [as factory] (product.service.ts:10:28)
    at core.mjs:2282:35
    at runInInjectorProfilerContext (core.mjs:871:5)
    at R3Injector.hydrate (core.mjs:2281:11)
    at R3Injector.get (core.mjs:2160:23)

This is my product.service.ts file

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Product } from '../common/product';

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  private baseUrl = 'http://localhost:8080/api/products';
  constructor(private httpClient: HttpClient) { }

  getProductList(): Observable<Product[]> {
    return this.httpClient.get<GetResponse>(this.baseUrl).pipe(
      map(response => response._embedded.products)
    );
  }
}
interface GetResponse{
  _embedded: {
    products: Product[];
  }
}

I think I have all the right imports but for some reason the data from my rest api that I made using Spring Boot that's currently running on my local machine isn't appearing.

I tried something like this in my app.config.ts file

import { ApplicationConfig, provideZoneChangeDetection, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    importProvidersFrom(HttpClientModule)
  ]
};

I'm following this tutorial video and we're using different versions of angular so I think it has something to do with how he has a app.module.ts file which I don't have. There's no errors with the code in my IDE but when looking at the project running on local host it doesn't have the data I'm looking for.

In my developer console I am getting this error:

NullInjectorError: R3InjectorError(Standalone[_AppComponent])[_ProductService -> _ProductService -> _HttpClient -> _HttpClient]: 
  NullInjectorError: No provider for _HttpClient!
    at NullInjector.get (core.mjs:1644:21)
    at R3Injector.get (core.mjs:2169:27)
    at R3Injector.get (core.mjs:2169:27)
    at injectInjectorOnly (core.mjs:1100:36)
    at Module.ɵɵinject (core.mjs:1106:40)
    at Object.ProductService_Factory [as factory] (product.service.ts:10:28)
    at core.mjs:2282:35
    at runInInjectorProfilerContext (core.mjs:871:5)
    at R3Injector.hydrate (core.mjs:2281:11)
    at R3Injector.get (core.mjs:2160:23)

This is my product.service.ts file

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Product } from '../common/product';

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  private baseUrl = 'http://localhost:8080/api/products';
  constructor(private httpClient: HttpClient) { }

  getProductList(): Observable<Product[]> {
    return this.httpClient.get<GetResponse>(this.baseUrl).pipe(
      map(response => response._embedded.products)
    );
  }
}
interface GetResponse{
  _embedded: {
    products: Product[];
  }
}

I think I have all the right imports but for some reason the data from my rest api that I made using Spring Boot that's currently running on my local machine isn't appearing.

I tried something like this in my app.config.ts file

import { ApplicationConfig, provideZoneChangeDetection, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    importProvidersFrom(HttpClientModule)
  ]
};

I'm following this tutorial video and we're using different versions of angular so I think it has something to do with how he has a app.module.ts file which I don't have. There's no errors with the code in my IDE but when looking at the project running on local host it doesn't have the data I'm looking for.

• angular

Share Improve this question Follow asked Jan 2 at 2:10 Jace JohnsonJace Johnson 7311 silver badge55 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Instead of importProvidersFrom(HttpClientModule) use provideHttpClient() from import { provideHttpClient } from '@angular/common/http';

import { ApplicationConfig, provideZoneChangeDetection} from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';

import { routes } from './app.routes';

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