Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 765
NbonD Avatar asked Jan 28 '18 14:01

NbonD


People also ask

How to fix nullinjectorerror no provider for httpclient in angular?

To fix NullInjectorError: No provider for HttpClient! error in Angular follow the below steps. Open app.module.ts file of Angular Application. Import HttpClientModule from @angular/common/http. Add HttpClientModule to the @NgModule imports array.

How are actions handled in ngrx?

One of the most fascinating discoveries was the way actions are handled in this whole process. As you may know, an action is a constituent of a reducer, as well as of an effect. NgRx ensures that actions are first handled by the reducers, after which they will eventually be intercepted by the effects.

How to use ngrx with npm?

The NGRX store either gets the data from the existing state itself or make the API call and update the state with the data from the API. You need to run this command npm install @ngrx/effects — save to install required dependencies. You have to define the actual services to make the API calls.

What happens to observables emitted by ngrx effects when an error occurs?

If we do that, the Observable that NgRx Effects subscribes to is going to be replaced by the Observable emitted in the catchError method, and then all future values emitted from action$ are going to be ignored (the new Observable in the error handler is not subscribed to them).


1 Answers

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]
})
like image 139
Salem Ouerdani Avatar answered Sep 26 '22 13:09

Salem Ouerdani