'NullInjectorError: No provider for t!' error with @ngrx

user_1768008 0
Viewed 3921

I have an angular 12.0.2 app that uses ngrx 12.0.0. When I run the app and access the route that lazy loads the module, I get the following error.

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(t)[t -> InjectionToken @ngrx/effects Feature Effects -> [object Object] -> t -> t -> t -> t -> t -> t]: 
  NullInjectorError: No provider for t!
NullInjectorError: R3InjectorError(t)[t -> InjectionToken @ngrx/effects Feature Effects -> [object Object] -> t -> t -> t -> t -> t -> t]: 
  NullInjectorError: No provider for t!
    at fs.get (main.js:1)

enter image description here

I have correctly set up the ngrx and effects. Please see the code below that shows the effect. The UserService is an entry in the provider in the module.

The error does not say which provider is missing. This is not a production build, but a build in my laptop to test.

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { Observable, EMPTY, of } from 'rxjs';
import { catchError, debounceTime, map, switchMap, withLatestFrom, concatMap } from 'rxjs/operators';
import * as UserActions from '../actions/user.actions';
import { VisitorService } from '../../service/visitor.service';
import { asyncScheduler } from 'rxjs';

@Injectable()
export class UserEffects {

  constructor(private actions$: Actions,
    private userService: UserService) { }

  loadUsers$ = createEffect(
    () => ({ debounce = 300, scheduler = asyncScheduler } = {}) => {
      return this.actions$.pipe(
        ofType(UserActions.loadUsers),
        debounceTime(debounce, scheduler),
        switchMap((_) => {
          return this.userService.getUserss().pipe(
            map(users => (UserActions.loadUsersSuccess({ data: users }))),
            catchError(err => of(UserActions.loadUsersFailure(err)))
          );
        })
      );
    });
}
ngrx-effects ngrx angular
4 Answers

The error 'No Provider for xyz' usually is thrown if you do not provide something or you do not call the forRoot() method on a module

In your case, Check how you have declared the Effect. Below is a sample of how it should look like

imports: [
  EffectsModule.forRoot([]),
]

If your feature is lazily loaded

imports: [
  EffectsModule.forFeature([Feature1Effects, Feature2Effects]),
]
user_136801150

In order to get a detailed error containing the missing provider you need to add "optimization": false option in the architect section of angular.json as follows:

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "optimization": false,
      ...
user_91274930

For me, it was fixed after to added this in my @NgModule :

  exports: [HttpClientModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
user_81112500

For me it was routing missing in the app that was using a service that uses routing. But the problem was I couldn't see a proper error message because it was production build. So don't forget to switch to dev build first thing when getting messages like this, cuz I somehow forgot.

user_106359530
Related