Angular 10 SSR构建后浏览器运行报错：i.BehaviorSubject不是构造函数

看起来你在Angular Universal SSR构建后遇到了BehaviorSubject相关的构造函数错误，这个问题大多和rxjs的导入、SSR环境下的模块处理或者依赖版本兼容有关。结合你的package.json配置，我整理了几个可行的解决步骤：

1. 检查rxjs的导入方式 #

确保你在代码里是正确导入BehaviorSubject的，避免使用rxjs内部私有路径（这类路径在SSR环境下可能无法被正确解析）：

• 正确的导入写法：

  import { BehaviorSubject } from 'rxjs';
  

• 禁止从rxjs/internal/BehaviorSubject这类内部模块导入。

2. 对齐rxjs与Angular的版本兼容性 #

你的Angular版本是10.0.5，官方配套的rxjs稳定版本是6.5.x系列，而你当前使用的是rxjs: ^6.6.0，小版本差异有时会引发SSR下的模块解析异常。可以尝试锁定到兼容版本：

1. 卸载当前rxjs相关依赖：

   npm uninstall rxjs rxjs-compat
   

2. 安装Angular 10对应的稳定版本：

   npm install rxjs@6.5.5 rxjs-compat@6.5.5 --save
   

3. 调整Universal服务器端配置 #

有时候SSR的服务器端代码没有正确识别rxjs模块，需要在server.ts中补充相关导入：

• 在server.ts文件顶部添加：

  import 'rxjs';
  import 'rxjs-compat';
  

• 同时检查tsconfig.server.json的类型配置，确保包含rxjs：

  {
    "compilerOptions": {
      "types": ["node", "rxjs"]
    }
  }
  

4. 清理缓存并重新构建 #

缓存问题也可能导致这类奇怪的模块错误，执行以下步骤彻底清理后重新构建：

• 删除依赖目录和锁文件：

  rm -rf node_modules package-lock.json
  

• 重新安装依赖：

  npm install
  

• 重新构建并启动SSR服务：

  npm run build:ssr && npm run serve:ssr
  

5. 排查第三方库的rxjs使用问题 #

你的依赖列表里包含多个第三方组件库（比如angular-ng-autocomplete、ngx-spinner等），如果某个库错误地使用了rxjs内部模块，也会触发这个错误。可以尝试暂时移除可疑库，验证错误是否消失，逐步定位问题库后查看其更新日志或提交issue反馈。

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