CODEWITHSUNDEEP
angularangular5ngrxngrx-effects
NbonD
NbonD

Reputation: 327

No provider for HttpHandler with ngrx/effects

I'm trying to recreate an authEffect very similar to the ngrx docs, and getting this error message: Error: StaticInjectorError(AppModule)[HttpClient -> HttpHandler]: StaticInjectorError(Platform: core)[HttpClient -> HttpHandler]: NullInjectorError: No provider for HttpHandler!

the effect service: 

@Injectable()
export class HttpEffects {
  constructor(private http: HttpClient, private actions$: Actions) {}

  @Effect() login$: Observable<ActionWithPayload> = this.actions$.pipe(
    ofType(ActionTypes.SEND_LOGIN),
    mergeMap((action: ActionWithPayload) =>
      this.http.post(SERVER_URL + LOGINAPI.LOGIN, action.payload, config).pipe(
        map(data => ({type: 'LOGIN_SUCCESS', payload: data})),
        catchError(() => of({type: 'LOGIN_ERROR'}))
      ))
  );
}

app.module:

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    StoreModule.forRoot(rootReducer),
    StoreDevtoolsModule.instrument({
      maxAge: 10
    }),
    EffectsModule.forRoot([HttpEffects])
  ],
  exports: [
    BrowserAnimationsModule
  ],
  providers: [ HttpClient ],
  bootstrap: [AppComponent]
})

I've tried to import the effect service in a feature model as well, with EffectsModule.forFeature(), but the same error is thrown.

Upvotes: 5

Views: 5334

Answers (1)

Salem Ouerdani
Salem Ouerdani

Reputation: 7886

As mentioned in HttpClient documentation:

Before you can use the HttpClient, you need to install the HttpClientModule which provides it. This can be done in your application module, and is only necessary once.

So you have to import the HttpClientModule instead of HttpClient:

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

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    ...
    EffectsModule.forRoot([HttpEffects])
  ],
  exports: [
    BrowserAnimationsModule
  ],
  bootstrap: [AppComponent]
})

Upvotes: 12

Related Questions