Angular 5路由切换取消请求时出现只读属性赋值错误求助

Problem Context #

我需要实现路由切换时取消所有来自Resolver或组件的HTTP请求，当前的实现逻辑是：

• 通过RoomsResolve发起请求时，借助ResolveRequestUnsubscribeService创建一个Subject作为取消信号
• 路由切换时调用该Subject的next(false)和complete()方法终止请求
• HTTP请求由Repository类封装，通过takeUntil操作符监听取消信号

但执行value.complete()时触发了以下错误：

core.js:1427 ERROR Error: Uncaught (in promise): TypeError: Cannot assign to read only property 'isStopped' of object '[object Object]'

Root Cause Analysis #

这个错误的核心原因是你尝试对一个已经处于完成状态的Subject实例再次调用complete()。在RxJS中，当Subject被标记为完成后，它的内部属性（比如isStopped）会被设置为只读（尤其是在严格模式下），此时再次调用complete()就会触发修改只读属性的报错。

常见的触发场景包括：

• 路由切换时重复调用了complete()（同一个Subject被关联到多轮路由请求）
• ResolveRequestUnsubscribeService作为单例服务复用了同一个Subject实例，上一次路由切换已经完成过该实例，这次再次操作
• 请求本身已经自然完成（比如响应返回），takeUntil已经触发过终止逻辑，此时手动调用complete()就会产生冲突

Solutions #

针对你的实现逻辑，这里提供几个针对性的修复方案：

1. 每次路由Resolve创建独立的Subject实例

确保每次进入路由时生成全新的Subject，避免复用旧实例：

// 在RoomsResolve中
constructor(private unsubscribeService: ResolveRequestUnsubscribeService) {}

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
  // 每次resolve创建新的取消信号Subject
  const cancel$ = new Subject<void>();
  this.unsubscribeService.setCurrentCancelSignal(cancel$);

  return this.roomRepository.getRooms()
    .pipe(
      takeUntil(cancel$),
      // 请求完成后自动清理Subject，避免外部重复操作
      finalize(() => {
        if (!cancel$.isStopped) {
          cancel$.complete();
        }
      })
    );
}

2. 在服务中严格管理Subject生命周期

修改ResolveRequestUnsubscribeService，确保只对活跃的Subject执行取消操作：

// ResolveRequestUnsubscribeService
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ResolveRequestUnsubscribeService {
  private currentCancel$?: Subject<void>;

  setCurrentCancelSignal(subject: Subject<void>): void {
    // 先清理上一次的活跃Subject
    this.cleanupCurrentSignal();
    this.currentCancel$ = subject;
  }

  // 路由切换时调用此方法取消请求
  onRouteChange(): void {
    this.cleanupCurrentSignal();
  }

  private cleanupCurrentSignal(): void {
    if (this.currentCancel$ && !this.currentCancel$.isStopped) {
      this.currentCancel$.next();
      this.currentCancel$.complete();
      this.currentCancel$ = undefined; // 清除引用，避免内存泄漏
    }
  }
}

3. 简化逻辑，利用路由生命周期自动终止请求

你也可以直接借助路由的ActivatedRoute生命周期自动取消请求，无需额外服务：

resolve(route: ActivatedRouteSnapshot): Observable<any> {
  return this.roomRepository.getRooms()
    .pipe(
      // 当路由参数变化时自动终止请求
      takeUntil(route.paramMap.pipe(skip(1)))
    );
}

4. 升级RxJS版本

如果你使用的是RxJS 5.x或更早版本，这类问题出现概率更高。建议升级到RxJS 6.x及以上版本，新版本对Subject的内部状态管理更严谨，能避免类似的只读属性报错。

Summary #

本质上，这个错误是对已完成的Subject重复执行complete()操作导致的。只要确保每个请求对应独立的取消信号Subject，并且操作前检查实例的活跃状态，就能解决这个问题。

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