Angular初始化加载配置时this.actions$注入失败报错求助

在main/ts -> app.config.ts中添加provideEffects(ConfigEffects)后，出现以下错误：

TypeError: this.actions$ is undefined
    ConfigEffects config.effects.ts:23
    createEffect Angular
    ConfigEffects config.effects.ts:20
    _ConfigEffects config.effects.ts:13
    ConfigEffects_Factory main.js:70
    Angular 18
    <anonymous> main.ts:5

请问为什么this.actions$没有被注入？是否遗漏了某些配置？

我的相关代码与配置 #

public/config/config.json #

{
    "auth0": {
      "domain": "xxxx.us.auth0.com",
      "clientId": "xxxxx",
      "redirectUri": "http://localhost:4200",
      "logoutRedirectUri": "http://localhost:4200",
      "audience": "https://xxxxx/"
    }
  }

main.ts -> app.config.ts #

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }), 
    provideRouter(routes),
    provideHttpClient(),
    provideStore({ config: configReducer }),
    provideEffects(ConfigEffects)
  ]
};

app.component.ts #

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {

  config$: Observable<any>;

  constructor(private store: Store) {
    this.config$ = this.store.select(selectConfig);
  }

  ngOnInit(): void {
    this.store.dispatch(loadConfig());
  }
}

config.effect.ts #

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { ConfigService } from './config.service';
import * as ConfigActions from './config.actions';
import { catchError, map, mergeMap } from 'rxjs/operators';
import { of } from 'rxjs';

@Injectable()
export class ConfigEffects {


  constructor(
    private actions$: Actions,
    private configService: ConfigService
  ) {
    console.log('Actions:', this.actions$);
    console.log('ConfigService:', this.configService);
  }
  
  loadConfig$ = createEffect(() =>
    {console.log('loadConfig...');
    
    return this.actions$.pipe(
      ofType(ConfigActions.loadConfig),
      mergeMap(() =>
        this.configService.loadConfig().pipe(
          map((config) => ConfigActions.loadConfigSuccess({ config })),
          catchError((error) => of(ConfigActions.loadConfigFailure({ error })))
        )
      )
    )
  }
  );

}

解决方案 #

核心原因 #

问题出在createEffect的写法上：你在箭头函数内部嵌套了一个普通函数，导致this上下文丢失，无法指向ConfigEffects实例，所以访问this.actions$时返回undefined。

修复步骤 #

1. 重构loadConfig$的写法，去掉多余的嵌套函数，直接在箭头函数内写逻辑：

loadConfig$ = createEffect(() => {
    console.log('loadConfig...');
    
    return this.actions$.pipe(
      ofType(ConfigActions.loadConfig),
      mergeMap(() =>
        this.configService.loadConfig().pipe(
          map((config) => ConfigActions.loadConfigSuccess({ config })),
          catchError((error) => of(ConfigActions.loadConfigFailure({ error })))
        )
      )
    );
  });

2. 额外检查项：
   • 确认@ngrx/effects版本与当前Angular版本兼容，版本不匹配可能引发注入异常
   • 确保ConfigService已正确注册到依赖注入系统（比如添加@Injectable({ providedIn: 'root' })装饰器，或在appConfig的providers中声明）

内容的提问来源于stack exchange，提问作者Prince Francis