Ionic3+AngularFire2 v5出现TypeError: Object(...) is not a function求助

我来帮你排查这个问题——这个TypeError: Object(...) is not a function在Ionic3搭配AngularFire2 v5的场景里非常常见，核心原因是RxJS版本不兼容以及操作符的使用方式不符合新版本规范。结合你的错误栈和代码来看，问题出在snapshotChanges().map(...)的调用逻辑上，下面是具体的解决步骤：

1. 安装RxJS兼容包 #

Ionic3默认依赖RxJS 5.x版本，但AngularFire2 v5基于RxJS 6的API开发，两者的操作符体系不兼容。我们需要安装rxjs-compat来做版本兼容：

npm install rxjs-compat@6 --save

2. 修改RxJS导入与操作符写法 #

打开你的home.ts文件，按照RxJS 6的规范调整代码：

• 调整Observable的导入路径：

  // 原导入
  import { Observable } from "rxjs/Observable";
  // 修改为
  import { Observable } from 'rxjs';
  

• 单独导入map操作符（RxJS 6要求操作符从rxjs/operators单独引入）：

  import { map } from 'rxjs/operators';
  

• 将链式调用的.map()改为用.pipe()包裹的写法（RxJS 6的标准操作符调用方式）：

  this.shoppingList$ = this.shopping
    .getShoppingList()
    .snapshotChanges()
    .pipe(
      map(changes => {
        return changes.map(c => ({
          key: c.payload.key,
          ...c.payload.val()
        }));
      })
    );
  

3. 确认AngularFire2版本（可选） #

如果上述步骤仍未解决问题，可能是你安装的AngularFire2版本过高，不兼容Ionic3对应的Angular 5环境。可以降级到兼容的稳定版本：

npm install angularfire2@5.0.0-rc.11 --save

完成这些修改后，你的代码就能正确处理AngularFire2返回的Observable数据流，那个类型错误应该就会消失了。

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