Angular7升级12执行ng serve报ng-network-status缺失rxjs/Rx错误

报错的核心原因是你项目里依赖的ng-network-status@0.2.3是已经停止维护多年的老旧库，它的源码使用了RxJS 5版本的导入路径rxjs/Rx，该导入路径从RxJS 6版本开始就被废弃，你当前安装的RxJS 7版本即使搭配rxjs-compat也无法兼容这个古早导入规则，ngcc编译时找不到对应依赖就会抛出错误。

按推荐优先级排序：

• 方案一（最推荐，无后续兼容隐患）：卸载废弃依赖，自行实现网络状态监听
  这个库的功能非常简单，自己实现仅需十几行代码，完全不需要引入第三方依赖：
  1. 执行命令卸载旧包：npm uninstall ng-network-status
  2. 新建网络状态服务，参考代码如下：

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable, fromEvent } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class NetworkStatusService {
  private readonly onlineStatus = new BehaviorSubject<boolean>(navigator.onLine);

  constructor() {
    fromEvent(window, 'online').subscribe(() => this.onlineStatus.next(true));
    fromEvent(window, 'offline').subscribe(() => this.onlineStatus.next(false));
  }

  getNetworkStatus(): Observable<boolean> {
    return this.onlineStatus.asObservable();
  }
}

3. 全局搜索项目中所有从ng-network-status导入的代码，替换为你自己写的这个服务即可，功能和原包完全一致，不存在版本兼容问题。

• 方案二（临时补丁方案，不推荐长期使用）：配置路径映射绕过编译检查
  如果暂时没有精力替换原包的引用，可以通过TypeScript路径映射把旧导入路径指向新版本RxJS的入口：
  1. 打开项目根目录的tsconfig.json，在compilerOptions节点下新增paths配置：

{
  "compilerOptions": {
    // 保留原有其他配置项
    "paths": {
      "rxjs/Rx": ["node_modules/rxjs/dist/types/index"]
    }
  }
}

2. 删除项目下的node_modules文件夹和package-lock.json文件，重新执行npm install安装依赖后再尝试启动。
   注意：这个方案只是临时绕过编译阶段的报错，老旧库没有针对Angular 12做适配，运行阶段大概率还会出现其他兼容性问题，长期使用建议还是选择方案一替换。

从你的package.json能看到项目里还有大量和Angular 12版本严重不匹配的老旧依赖，比如@angular/cdk@7.x、@angular/material@6.x、已经被官方彻底移除的@angular/http包等，解决当前问题后启动项目可能还会遇到其他兼容报错，建议后续逐步把这些依赖升级到适配Angular 12的对应版本。

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