Ionic3结合AngularFire2出现Object(...) is not a function错误排查

我帮你分析下这个问题，你遇到的Object(...) is not a function错误确实和你怀疑的扩展运算符以及RxJS操作符的使用有关，结合你的技术栈（Ionic3对应Angular5），咱们一步步来解决：

问题根源 #

• RxJS操作符未导入：Angular5使用RxJS 5.x版本，这个版本需要手动导入Observable的操作符（比如map），如果没导入，调用.map()时会触发类似错误。
• 扩展运算符的兼容性：虽然TypeScript支持扩展运算符，但在某些旧配置下，对象扩展运算符可能没有被正确转译，导致运行时出错。
• AngularFire2与依赖版本匹配：你的angularfire2@5.0.0-rc.9需要搭配对应的firebase版本，缺少正确的firebase依赖也可能引发奇怪的运行时错误。

分步解决方案 #

1. 导入RxJS的map操作符 #

在home.ts的顶部添加以下导入语句，确保map操作符能被正常使用：

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

2. 替换扩展运算符为Object.assign #

把你代码里的扩展运算符替换成Object.assign，这样能避免语法转译的问题，修改后的代码如下：

this.shoppingList = this.shopping
  .getShoppingList()
  .snapshotChanges()
  .map(changes => {
    return changes.map(c => {
      // 先把payload的值转成Item类型，确保类型安全
      const itemData = c.payload.val() as Item;
      // 用Object.assign合并key和item数据
      return Object.assign({ key: c.payload.key }, itemData);
    });
  });

3. 确保Firebase依赖版本正确 #

你的package.json里没有列出firebase依赖，而angularfire2需要它才能正常工作。在package.json的dependencies里添加兼容的版本：

"firebase": "^5.12.0",

然后执行命令重新安装依赖：

npm install

4. 检查TypeScript配置（可选） #

打开项目根目录的tsconfig.json，确保compilerOptions里的配置支持必要的语法：

"compilerOptions": {
  "target": "es5",
  "lib": ["es2015", "dom"],
  "module": "es2015",
  "moduleResolution": "node"
}

验证修改 #

完成以上步骤后，重新运行你的Ionic项目：

ionic serve

这时候应该能正常获取并展示购物列表数据了，插入数据的功能也不会受影响。

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