CODEWITHSUNDEEP
angularngrxngrx-effects
wonderful world
wonderful world

Reputation: 11599

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

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

Upvotes: 6

Views: 10190

Answers (6)

Bill Reinke
Bill Reinke

Reputation: 31

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.

Upvotes: 1

user20219371
user20219371

Reputation: 21

Here, we need to add provider in the module

providers: [
    serviceName
  ]

Upvotes: 2

g.hagmt
g.hagmt

Reputation: 73

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.

Upvotes: 1

Raphaël Etang-Salé
Raphaël Etang-Salé

Reputation: 390

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

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

Upvotes: 1

Yulia Galiulina
Yulia Galiulina

Reputation: 149

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

Upvotes: 5

Owen Kelvin
Owen Kelvin

Reputation: 15083

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

Upvotes: 2

Related Questions