为什么尽管包含了必要的模块且没有循环依赖，但 NgRx 效果中的 Actions 对象仍无法注入？

Question

因此，我正在开发一个协作文档编辑器应用程序，并且在这里使用 NgRx 效果来根据另一个状态更改来引发状态更改。我已经安装了该软件包，配置了 app.config 文件以包含 EffectsModule，但仍然收到错误，因此我的应用程序未运行。

TypeError: Cannot read properties of undefined (reading 'pipe')
    at effects.ts:14:19
    at createEffect (ngrx-effects.mjs:85:47)
    at <instance_members_initializer> (effects.ts:13:21)
    at new _FeatureEffects (effects.ts:9:3)
    at Object.FeatureEffects_Factory [as factory] (effects.ts:31:6)
    at core.mjs:3132:35
    at runInInjectorProfilerContext (core.mjs:866:5)
    at R3Injector.hydrate (core.mjs:3131:11)
    at R3Injector.get (core.mjs:3005:23)
    at injectInjectorOnly (core.mjs:1095:36)

效果等级：

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { of } from 'rxjs';
import { catchError, switchMap } from 'rxjs/operators';
import { addDocumentSuccess, loadDocumentsSuccess, loadDocumentsFailure } from './actions';

@Injectable()
export class FeatureEffects {
  constructor(private actions$: Actions) {
    console.log(this.actions$); // Verify if `actions$` is initialized correctly
  }

  triggerAction2$ = createEffect(() => 
    this.actions$.pipe(
      ofType(addDocumentSuccess),
      switchMap((action) => {
        const result = action.documents;

        // Ensure result is not undefined or null
        if (result) {
          return of(loadDocumentsSuccess({ documents: result }));
        } else {
          console.error('No documents found in action');
          return of(loadDocumentsFailure({ error: 'No documents found' })); // Dispatch an error action if needed
        }
      }),
      catchError(error => {
        console.error('Error in effect:', error);
        return of(loadDocumentsFailure({ error: 'An error occurred' })); // Dispatch an error action
      })
    )
  );

  
  
}

应用程序配置：

import { ApplicationConfig, importProvidersFrom, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideAnimations } from '@angular/platform-browser/animations';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { StoreModule } from '@ngrx/store';
import { routes } from './app.routes';
import { addDocumentReducer, documentLoadReducer, documentProcessedReducer, LoginReducer } from './NgRx/reducer';
import { httpInterceptor } from './http.interceptor';
import { environment } from './environment';
import { EffectsModule } from '@ngrx/effects';
import { FeatureEffects } from './NgRx/effects';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideAnimations(),
    provideHttpClient(withInterceptors([httpInterceptor])),

    // Importing Store and Effects at the root level
    importProvidersFrom(
      StoreModule.forRoot({
        loginState: LoginReducer,
        documentProcessedState: documentProcessedReducer,
        documentLoadingState: documentLoadReducer,
        addDocumentState: addDocumentReducer,
      }),
      // Add EffectsModule.forRoot() for initializing root effects
      
      EffectsModule.forRoot([FeatureEffects]), // Root effects can be provided here if any
      StoreDevtoolsModule.instrument({
        maxAge: 25, // Retains last 25 states
        logOnly: environment.production, // Restrict extension to log-only mode
      })
      // Add your feature effects here
      
    )
  ]
};

我尝试将 EffectsModule.forRoot 和 .forModule 包含在相应的类中并放在 Store.Module 之后（我搜索到有必要包含在之后）。我调试了代码，我 100% 确定源是 actions$，它是

Actions

类型的对象，无法注入。同样，一个根本原因可能是循环依赖，但我运行了一个命令来检查循环依赖，但它没有。所以我太困惑了，无法找到错误。

Answer 1

您可能没有正确配置根导入。或者你的减速机可能缺少一些东西。

这是一个 stackblitz 显示您的示例工作正常...