Angular5应用迁移RxJS5至RxJS6时Ngrx Effects报错求助

问题根源 #

你碰到的Property 'pipe' does not exist on type 'Actions<Action>'错误，核心原因是**@ngrx/effects版本没跟上RxJS 6的适配要求**。RxJS 6改用pipe链式写法后，ngrx是从v6.x版本开始才把Actions类型改成支持pipe的Observable类型，旧版ngrx effects还停留在RxJS 5的链式调用逻辑上，自然没有pipe这个方法。

分步解决方案 #

1. 升级@ngrx依赖到兼容版本

先确保你的@ngrx/effects、@ngrx/store等核心包至少是v6.x（Angular 5对应ngrx的稳定兼容版本就是v6.x）。执行以下命令完成升级：

npm install @ngrx/effects@6.x @ngrx/store@6.x --save

如果项目里还有其他ngrx相关依赖（比如@ngrx/entity、@ngrx/router-store），也要同步升级到v6.x版本，避免版本不兼容问题。

2. 修正Effects代码细节

除了版本问题，你的代码还有几处需要调整，才能完全适配RxJS 6和ngrx v6：

• 错误处理里如果不需要触发后续action，建议用EMPTY代替of({})，更符合RxJS的语义；
• 明确Effect的返回类型，避免类型歧义；
• 确保ofType的使用符合ngrx v6的语法规范。

修正后的完整代码如下：

import { Observable, of, EMPTY } from 'rxjs';
import { catchError, map, switchMap } from 'rxjs/operators';
import { Action, Store } from '@ngrx/store';
import { Actions, Effect, ofType } from '@ngrx/effects';

@Effect() 
public onSave$: Observable<Action | void> = this.actions.pipe(
  ofType<DashboardGroupsActions.Save>(DashboardGroupsActions.SAVE_DASHBOARD_GROUPS),
  map((action: DashboardGroupsActions.Save) => action.payload),
  switchMap((payload: DashboardGroups) => 
    this.api.saveDashboardGroup(payload).pipe(
      // 如果保存成功需要触发其他action，在这里添加map返回对应action即可
      // map(() => new DashboardGroupsActions.SaveSuccess())
    )
  ),
  catchError(() => {
    // 可以在这里添加错误日志，或者返回错误action
    // console.error('仪表盘分组保存失败');
    // return of(new DashboardGroupsActions.SaveFail());
    return EMPTY; // 不触发任何后续action
  })
);

3. 确认RxJS导入规范

所有RxJS操作符要从rxjs/operators导入，而Observable、of、EMPTY这类创建类方法要从rxjs导入，这是RxJS 6的标准导入方式，别再用RxJS 5的旧导入路径（比如rxjs/Observable）。

临时兼容方案（不推荐长期使用） #

如果暂时没法升级ngrx版本，可以临时把this.actions转成普通Observable再用pipe，但这只是权宜之计，长期来看还是升级依赖更稳妥：

@Effect() 
public onSave$: Observable<Action | void> = Observable.from(this.actions).pipe(
  // 后续操作和之前一致
);

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