使用ng2-bs3-modal组件导航时出现Observable.fromEvent报错求助

问题原因 #

你遇到的这个错误本质是版本兼容性冲突：

• 你使用的ng2-bs3-modal@0.10.4是2017年的旧版本，完全基于RxJS 5开发，代码里依赖了Observable.fromEvent这种RxJS 5的静态方法调用方式。
• 而你的项目采用的是RxJS 6，在这个版本里，这类静态方法已经被移除，改为直接导入独立的操作符（比如fromEvent）。虽然你安装了rxjs-compat做向下兼容，但这个停更多年的旧库，部分代码在RxJS 6+compat环境下依然无法正常适配。

另外提一句：ng2-bs3-modal已经停止维护多年，后续还会陆续出现和新版本Angular/RxJS的兼容问题，所以更推荐直接替换成活跃维护的组件库。

解决方案 #

方案1：替换为活跃维护的Modal组件库（强烈推荐）

既然原库已经无人维护，换成成熟的替代方案是最稳妥的选择：

• ngx-bootstrap：完美兼容Bootstrap 3/4，支持Angular 6+，用法和ng2-bs3-modal非常接近，迁移成本极低。

  1. 安装依赖：

     npm install ngx-bootstrap --save
     

  2. 在你的模块中导入Modal模块：

     import { ModalModule } from 'ngx-bootstrap/modal';
     
     @NgModule({
       imports: [
         ModalModule.forRoot(),
         // 其他业务模块
       ]
     })
     export class YourModule { }
     

  3. 组件中的使用方式只需要做少量调整，比如模板指令名称、组件类导入路径，官方文档有详细的迁移示例。

• ng-bootstrap：Bootstrap官方推出的Angular组件库，基于Bootstrap 4，同样完全支持Angular 6+，适合偏好官方生态的开发者。

方案2：临时修复ng2-bs3-modal的RxJS兼容问题（不推荐）

如果暂时无法替换库，可以手动修改该库的代码来适配RxJS 6：

1. 打开node_modules/ng2-bs3-modal/components/modal-instance.js，找到报错的第52行：Observable_1.Observable.fromEvent。
2. 先在文件顶部添加RxJS 6的导入：

   import { fromEvent } from 'rxjs';
   

3. 把原代码中的Observable_1.Observable.fromEvent替换为fromEvent。
4. 检查该库其他文件（比如modal.js），如果还有类似Observable.xxx的静态方法调用，全部改为从rxjs导入对应的操作符。

⚠️ 注意：直接修改node_modules的代码会在下次npm install时被覆盖，你可以用patch-package工具持久化这个修改：

• 安装工具：npm install patch-package --save-dev
• 修改代码后，运行npx patch-package ng2-bs3-modal生成补丁文件，后续执行npm install时会自动应用这个补丁。

额外检查

确保你的项目中没有混用RxJS 5和RxJS 6的导入方式：

• 所有自定义代码统一使用RxJS 6的导入风格：import { Observable, fromEvent } from 'rxjs';
• 避免导入rxjs/Observable这类RxJS 5的路径。

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