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.
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.
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.
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.
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).
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]
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With