“NullInjectorError：没有 t 的提供者！” @ngrx 出错

Question

我有一个使用ngrx 12.0.0的angular 12.0.2应用程序。 当我运行应用程序并访问延迟加载模块的路由时，我收到以下错误。

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)

我已经正确设置了ngrx和effects 。 请参阅下面显示效果的代码。 UserService是模块中提供程序中的一个条目。

该错误并未说明缺少哪个提供程序。 这不是生产版本，而是在我的笔记本电脑中进行测试的版本。

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

Answer 1

如果您未提供某些内容或未在模块上调用forRoot()方法，通常会引发错误“No Provider for xyz”

在您的情况下，请检查您如何声明效果。 下面是它应该是什么样子的示例

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

如果您的功能是延迟加载的

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

Answer 2

为了获得包含缺少提供程序的详细错误，您需要在 angular.json 的架构师部分添加"optimization": false选项，如下所示：

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

Answer 3

对我来说，在我的@NgModule 中添加这个之后就修复了：

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

Answer 4

对我来说，在使用使用路由的服务的应用程序中缺少路由。 但问题是我看不到正确的错误消息，因为它是生产版本。 所以不要忘记在收到这样的消息时首先切换到开发构建，因为我不知何故忘记了。