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

Question

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)

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)))
          );
        })
      );
    });
}

Alopecia

Answer 1

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,
      ...

Shulamite

Answer 2

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]),
]

Hyksos

I have EffectsModule.forFeature([UserEffects]) in the import section of the module. – Alopecia

What about EffectsModule.forRoot([]), in the app.module ? – Hyksos

I have StoreModule.forRoot(reducers, { metaReducers }), !environment.production ? StoreDevtoolsModule.instrument() : [], EffectsModule.forRoot([AppEffects]) – Alopecia

Answer 3

Here, we need to add provider in the module

providers: [
    serviceName
  ]

Rincon

Answer 4

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

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

Kolk

Answer 5

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.

Hypaesthesia

Answer 6

The error 'No Provider for t!' occurs when accessing a standalone component that is missing a dependent Module in its imports array. In my case I was trying to open a MatDialog from a standalone component that did not include MatDialogModule in its imports array.

Ilarrold

good hint, in my case was similar issue with refactorings – Spaulding