ERROR NullInjectorError: No provider for HttpClient:

Question

ERROR NullInjectorError: R3InjectorError(PaceGeneratorLibraryComponentLoader)[HttpClient -> HttpClient -> HttpClient -> HttpClient]: 
  NullInjectorError: No provider for HttpClient!
    at NullInjector.get (core.mjs:6367:27)
    at R3Injector.get (core.mjs:6794:33)
    at R3Injector.get (core.mjs:6794:33)
    at R3Injector.get (core.mjs:6794:33)
    at R3Injector.get (core.mjs:6794:33)
    at ChainedInjector.get (core.mjs:13824:36)
    at lookupTokenUsingModuleInjector (core.mjs:3293:39)
    at getOrCreateInjectable (core.mjs:3338:12)
    at ɵɵdirectiveInject (core.mjs:10879:12)
    at NodeInjectorFactory.DetailsComponent_Factory [as factory] (ɵfac.js? [sm]:1:1)

I faced error above when I was using HttpClient to acquire backend data. I have included HttpModule in my NgModule but it does not seems to be working.

@NgModule({
  declarations: [
    AppComponent,
    WidgetContainerComponent
  ],
  exports: [],
  imports: [
    AppRoutingModule,
    BrowserAnimationsModule,
    HttpClientModule,
    BrowserModule,
    ToastrModule.forRoot(),
    ModalModule.forRoot(),
    PlatformCoreBaseModule,
    MsalModule.forRoot(getMsalConfig(environment).msalInstanceConfig, getMsalConfig(environment).msalGuardConfig, undefined),
    
  ],
  providers: [
    AppStateService,
    ClientSettingsService,
    DisplayStateService,
    Title,
    HttpClientModule,
    WebPlatformApiService,
    DynamicComponentLoader,

I have been trying for hours and doesn't have an idea on it.

Answer 1

Use import statement at top of the file if not added

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

Note: we also need to import HttpClientModule if we are using separate module

Answer 2

use HttpClientModule in the imports Array not in the providers array:

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

@NgModule({
  imports: [
    //Module...

    HttpClientModule,
   
  ],
  declarations: [
   //component
  //pipe
 //directive
  ],
 providers :[
 //services...
 ],
 exports :[
 // some components or pipe or directive in the declarations tab
 ]
  bootstrap: [AppComponent]
})