Angular中TypeError: Cannot read properties of undefined (reading 'push')报错求助

报错信息 #

ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'push')
TypeError: Cannot read properties of undefined (reading 'push')
    at R3Injector.processProvider (core.mjs:11577:31)
    at core.mjs:11546:56
    at core.mjs:4192:76
    at Array.forEach (<anonymous>)
    at deepForEach (core.mjs:4192:11)
    at R3Injector.processInjectorType (core.mjs:11546:13)
    at core.mjs:11514:30
    at core.mjs:4192:76
    at Array.forEach (<anonymous>)
    at deepForEach (core.mjs:4192:11)
    at resolvePromise (zone.js:1211:31)
    at zone.js:1118:17
    at zone.js:1134:33
    at _ZoneDelegate.invoke (zone.js:372:26)
    at Object.onInvoke (core.mjs:25719:33)
    at _ZoneDelegate.invoke (zone.js:371:52)
    at Zone.run (zone.js:134:43)
    at zone.js:1275:36
    at _ZoneDelegate.invokeTask (zone.js:406:31)
    at Object.onInvokeTask (core.mjs:25706:33)

相关代码模块 #

当前模块中唯一包含push()方法的是BlacklistImportEffects类：

// Core
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';

// Applications
import { BlacklistImportActionTypes } from './blacklist-import.actions';
import { BlacklistImportApi } from './blacklist-import.api';
import { of } from 'rxjs';
import { switchMap, map, catchError } from 'rxjs/operators';
import { MessageService } from 'src/app/shared/services';

@Injectable()
export class BlacklistImportEffects {
  constructor(
    private actions$: Actions,
    private blacklistImportApi: BlacklistImportApi,
    private messageService: MessageService,
  ) { }

  getList$ = createEffect(() =>
    this.actions$.pipe(
      ofType(BlacklistImportActionTypes.REQUEST_SEARCH_BLACKLIST_IMPORT),
      switchMap(({ payload }) =>
        this.blacklistImportApi.searchBlacklistImport(payload).pipe(
          map(({ data }) => ({
            type: BlacklistImportActionTypes.REQUEST_SEARCH_BLACKLIST_IMPORT_RESULT,
            payload: data,
          })),
          catchError((err) => {
            return of({
              type: BlacklistImportActionTypes.REQUEST_SEARCH_BLACKLIST_IMPORT_RESULT,
              payload: { error: err.error },
            })
          })
        )
      )
    )
  );

  checkImportProcess$ = createEffect(() =>
    this.actions$.pipe(
      ofType(BlacklistImportActionTypes.REQUEST_CHECK_IMPORT_PROCESS),
      switchMap(({ isOpenImport }) =>
        this.blacklistImportApi.checkImportProcess().pipe(
          switchMap(({ data }) => {
            const actions = [{
              type: BlacklistImportActionTypes.REQUEST_CHECK_IMPORT_PROCESS_RESULT,
              payload: data
            }];
            if (isOpenImport) {
              actions.push({
                type: BlacklistImportActionTypes.REQUEST_OPEN_IMPORT_FORM,
                payload: !data?.totalRow
              })
            }
            return actions;
          })
          ,
          catchError((err) => {
            if (err.error.message) {
              this.messageService.error(err.error.message);
            }
            return of({
              type: BlacklistImportActionTypes.REQUEST_CHECK_IMPORT_PROCESS_RESULT,
              payload: { error: err.error },
            })
          })
        )
      )
    )
  );

  importCase$ = createEffect(() =>
    this.actions$.pipe(
      ofType(BlacklistImportActionTypes.REQUEST_IMPORT_BLACKLIST),
      switchMap(({ payload }) =>
        this.blacklistImportApi.importBlacklist(payload).pipe(
          map(({data}) => ({
            type: BlacklistImportActionTypes.REQUEST_IMPORT_RESULT,
            payload: data,
          })),
          catchError((err) => {
            if (err.error.message) {
              this.messageService.error(err.error.message);
            }
            return of({
              type: BlacklistImportActionTypes.REQUEST_IMPORT_RESULT,
              payload: { error: err.error },
            })
          })
        )
      )
    )
  );
}

问题背景 #

从现有相似模块克隆该模块，Angular经验较少；咨询AI后被认为是导入错误的Actions，但实际并非如此；在push()方法前添加console.log无输出，疑惑为何未执行到代码却触发该报错。

报错根源分析 #

从报错栈可以明确：错误发生在Angular依赖注入初始化阶段（R3Injector.processProvider），而非代码运行时执行push()方法的环节。也就是说，BlacklistImportEffects类在被Angular注入器实例化的过程中就出现了异常，根本没到触发effects、执行push()代码的阶段。

具体排查方向 #

• 依赖项未正确注册

  • 检查BlacklistImportApi是否在模块的providers数组中声明，或是否使用providedIn: 'root'全局注册。若该服务未注册，Angular注入器实例化BlacklistImportEffects时会尝试注入未定义的依赖，进而触发内部数组操作异常。
  • 同样检查MessageService的注册状态，确认它在src/app/shared/services下是否正确导出并注册。

• Effects模块配置问题

  • 确保特性模块已导入EffectsModule.forFeature([BlacklistImportEffects])，或根模块已导入EffectsModule.forRoot([...])。若Effects未正确配置，Angular处理注入时会出现异常。

• 克隆模块时的遗漏项

  • 检查blacklist-import.actions.ts中的BlacklistImportActionTypes常量是否正确定义并导出，避免因引用未定义值间接引发注入异常。
  • 确认BlacklistImportApi中的所有方法（如checkImportProcess、searchBlacklistImport）是否正确实现，克隆时是否遗漏方法定义导致服务实例化出错。

• 版本兼容性问题

  • 检查项目中@ngrx/effects与@angular/core的版本是否匹配，版本不兼容可能导致注入器处理Effects时出现内部错误。

验证方法 #

先注释掉BlacklistImportEffects中的所有effects逻辑，仅保留空类和构造函数，再运行项目：

• 若报错消失，说明问题出在effects的依赖项或配置上；
• 若报错依然存在，可确定是类的依赖注入环节有问题，重点排查BlacklistImportApi和MessageService的注册。

内容的提问来源于stack exchange，提问作者Kami Hoang