TypeError: Object(...) 不是函数答案

【问题标题】：TypeError: Object(...) is not a functionTypeError: Object(...) 不是函数
【发布时间】：2018-10-25 04:41:27
【问题描述】：

在 ionic3、angularfire2 v5 上工作

TypeError: Object(...) is not a function
    at SwitchMapSubscriber.project (http://localhost:8100/build/vendor.js:73935:76)
    at SwitchMapSubscriber._next (http://localhost:8100/build/vendor.js:61778:27)
    at SwitchMapSubscriber.Subscriber.next (http://localhost:8100/build/vendor.js:20750:18)
    at RefCountSubscriber.Subscriber._next (http://localhost:8100/build/vendor.js:20786:26)
    at RefCountSubscriber.Subscriber.next (http://localhost:8100/build/vendor.js:20750:18)
    at Subject.next (http://localhost:8100/build/vendor.js:23237:25)
    at ConnectableSubscriber.Subscriber._next (http://localhost:8100/build/vendor.js:20786:26)
    at ConnectableSubscriber.Subscriber.next (http://localhost:8100/build/vendor.js:20750:18)
    at Notification.observe (http://localhost:8100/build/vendor.js:51866:50)
    at AsyncAction.DelaySubscriber.dispatch (http://localhost:8100/build/vendor.js:76246:40)

home.ts

import { Component } from '@angular/core';
import {IonicPage, NavController} from 'ionic-angular';
import { Observable } from "rxjs/Observable";
import { Item } from "../../models/item/item.model";
import {ShoppingListServices} from "../../services/shopping-list/shopping-list.services";



@IonicPage()

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  shoppingList$: Observable<Item[]>;
  constructor(public navCtrl: NavController,  private shopping: ShoppingListServices) {
    this.shoppingList$=this.shopping
      .getShoppingList()
      .snapshotChanges()
      .map(
        changes => {
          return changes.map(c => ({
            key: c.payload.key, ...c.payload.val()
          }));
        }
      );
  }

}

home.html

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      Shoping List
    </ion-title>
    <ion-buttons end>
      <button navPush="AddShoppingItemPage" ion-button>
        <ion-icon name="add"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-list-header>
      Items
    </ion-list-header>
    <ion-item *ngFor="let item of shoppingList$ | async">
      {{ item.name }}
    </ion-item>
  </ion-list>
</ion-content>

【问题讨论】：

嘿，同样的问题。我发现错误来自在您的应用程序中使用 Firestore。我知道这不是问题的答案，但可能有助于进一步调查。
是的，我正在投资。如果我找到任何解决方案，我会在这里发布。你也这样做
成功了吗？我现在也有同样的情况。
"ERROR TypeError: Object(...) is not a function" using AngularFirestore and firebase的可能重复

标签： ionic3 angularfire2

【解决方案1】：

我从：

"angularfire2" : "5.0.0-rc.8.0" and   "firebase": "^5.0.2",

到：

"angularfire2" : "5.0.0-rc.6.0" and "firebase": "4.12.1"

【讨论】：

让我们看看，我会降级
与 6.0 相同的问题。

【解决方案2】：

什么对我有用：在 CLI 的命令行下运行

npm install angularfire2@5.0.0-rc.6 firebase@4.13.1

和

npm install @firebase/app@^0.1.6

【讨论】：

【解决方案3】：

AngularFire 的最新版本需要 rxjs 6。请升级 rxjs，如果您有尚未升级的依赖项，则需要包含 rxjs-compat。

【讨论】：

Angularfire2 版本 5.0.0rc 4 解决了我的问题。但是当 rc8 或 9 和 rxj（更改 rxjs_compat）。其他错误即将到来，地图错误stackoverflow.com/questions/50387987/…

【解决方案4】：

尽管您可以运行 rxjs-compat，但您需要更改代码以反映新的 RXJS 只是时间问题。如果您使用 Angular 6 和 Angular 6 CLI，那么您将拥有 RXJS 6，因为 Angular 在大多数事情上都依赖于 RXJS。此外，如果您打算使用 Angular Material 2，那么您将需要 Angular 6。所以让我们更新您的 RXJS。从 Ionic 4 开始，这将非常重要。Ionic 4 将高度依赖 Angular，因为它现在将包含 Angular Routes。

RXJS 6 最常见的一些变化是：

import 'rxjs/add/observable/of';
// or 
import { of } from 'rxjs/observable/of';

变成

import { of } from 'rxjs';

和

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/take';

变成

import { map, take } from 'rxjs/operators';

和

import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

变成

import { Observable, Subject } from 'rxjs';

https://www.academind.com/learn/javascript/rxjs-6-what-changed/

【讨论】：

值得一提的是运营商的新 pipe() 用法。您提供的链接确实解释了这一点，但我认为您的回答也值得提及。

【解决方案5】：

这对我有用，使用"angularfire2": "^5.0.0-rc.11"

npm i rxjs@6 rxjs-compat@6 promise-polyfill --save

要检索数据：

this.db.list('/customers').valueChanges().subscribe((datas) => { 
  console.log("datas", datas)
},(err)=>{
   console.log("probleme : ", err)
});

或者您可以查看 GitHub 存储库中的 angularfire2 here 了解更多详情

【讨论】：

先生，我遇到了同样的错误，我没有使用 angularFire，所以可以安装这个插件吗？
啊！为我工作，我只是缺少“promise-polyfill”，非常感谢！

【解决方案6】：

我有一个解决方案：

只需卸载两个包，即 angularfire2 和 firebase

typeError: Object(...) is not a function ionic

【讨论】：

【解决方案7】：

你需要安装这个：在 CLI 的命令行下面运行

npm i rxjs@6 rxjs-compat@6 promise-polyfill --save

然后将这些库导入到您的 home.ts：

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

【讨论】：

这个建议也适用于我。除此之外，我还将 angularfire2 从 5.1.3 降级到 5.0.0-rc.11

【解决方案8】：

虽然我的问题与angularfire 无关，但正在搜索 TypeError: Object(…) is not a function 将用户带到这个问题。我的问题是我在 ionic v3 中使用了Youtube Video Player 插件。但由于 ionic v3 文档现在自动重定向到 ionic v4 文档，我使用的是最新版本的插件。

只需安装第 4 版的 Youtube Video Player 插件，一切顺利。

npm install --save @ionic-native/youtube-video-player@4

Ionic v3 docs

P.S：当您被自动重定向到 ionic 的 v4 文档时，只需在 URL 中插入 v3。

【讨论】：

【解决方案9】：

如果你在 ionic 3 中安装任何新插件后得到了

然后只需检查 package.json 文件中状态栏或闪屏插件的版本

  "@ionic-native/splash-screen": "~4.17.0",
  "@ionic-native/status-bar": "~4.17.0",

将已安装插件的版本更改为相同并执行

npm update

它看起来像这样

    "@ionic-native/camera": "^4.17.0",
    "@ionic-native/core": "~4.17.0",
    "@ionic-native/splash-screen": "~4.17.0",
    "@ionic-native/status-bar": "~4.17.0",

希望它可以帮助某人......为我工作了 android 权限和相机插件

另外，您需要从 import 语句中删除 ngx

import { Camera, CameraOptions } from '@ionic-native/camera';

【讨论】：

【解决方案10】：

它发生在我身上，也许您在项目中使用 ionic 3 ，并且您安装了 ionic 版本 4 的插件，如果您使用 ionic 3，请尝试从 https://ionicframework.com/docs/v3/ 安装您的插件。

【讨论】：

【解决方案11】：

我正在使用 rxjs-etc 库，但由于某种原因发生了冲突，这不仅导致了错误 TypeError: Object(…) is not a function，而且还完全杀死了我在 Chrome 中的 CPU。

我不确定为什么——据我所知，这与最近的 rxjs 版本不兼容有关——但如果你使用这个库，它可能是造成这种情况的原因。

【讨论】：