Angular Error Message in Developer Console

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.

Continue reading...