Angular中subscribe方法被标记弃用的问题解决方案

云原生阿岚

2026-9-10

问题原因

subscribe被标记删除线提示弃用，由几个问题共同导致：

你的TypeScript版本（4.6.2）超出Angular 13兼容范围，Angular13最高只支持TypeScript 4.5.x，版本不匹配会触发类型提示错乱，误加载高版本RxJS的弃用规则
本地依赖安装异常，从你贴的版本输出看Angular: undefined，说明核心Angular包没有被正确识别，Windows下npm的缓存、路径软链接问题很容易导致这类类型加载错误，这也是为什么同代码在Ubuntu上运行正常的原因
直接给subscribe传next、error两个独立回调的写法，在RxJS 7中被标记为弃用，类型错乱时TS会匹配到RxJS7的类型定义给出错误提示

解决方案

按顺序操作即可：

优先修改subscribe写法为Observer对象传参，这种写法在RxJS6、RxJS7全版本兼容，完全不会触发弃用提示，逻辑和原有代码完全一致，修改ngOnInit里的两处subscribe代码：

// 断点观察者订阅
this.isHandsetObserver.subscribe({
  next: currentObserverValue => {
    this.isHandset = currentObserverValue;
    this.loadCards();
  }
});

// 接口请求订阅
this.appService.getDeals().subscribe({
  next: response => {
    this.cardsForHandset = response.handsetCards;
    this.cardsForWeb = response.webCards;
    this.loadCards();
  },
  error: error => {
    alert('There was an error in retrieving data from the server');
  }
});

把TypeScript降到兼容版本，项目根目录执行命令：
```
npm install typescript@4.5.5 --save-dev
```
如果前两步操作完还有异常，直接删掉项目根目录下的node_modules文件夹和package-lock.json文件，重新执行npm install安装依赖即可，Windows下npm依赖安装的偶发问题通过清依赖重装基本都能解决。
额外清理冗余代码：你文件里导入的CursorError完全没有被使用，删掉import { CursorError } from '@angular/compiler/src/ml_parser/lexer';这行，这类导入编译器内部模块的代码也可能触发奇怪的类型校验错误。