Question

使用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>

Answer 1

这对我有效，使用"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，了解更多详细信息

Answer 2

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

Answer 3

即使您可以运行rxjs-compat，在您需要更改代码以反映新的RXJS之前，这只是时间问题。如果您使用的是Angular 6和Angular 6 CLI，那么您将拥有RXJS 6，因为Angular在大多数情况下依赖于RXJS。此外，如果您打算使用Angular Material 2，那么您将需要Angular 6.所以我们只需更新您的RXJS。这对于Ionic 4来说非常重要。离子4将在很大程度上取决于角度，因为它现在将包括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';

变为

从＆＃39; rxjs /运营商＆＃39;;

导入{map，take}

和

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/

Answer 4

您需要安装此程序：在CLI中的命令行下运行

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

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

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

Answer 5

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

只需安装Youtube Video Player插件的第4版，就可以了。

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

Ionic v3 docs

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

Answer 6

如果您要在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权限和相机插件

另外，您将需要从导入语句中删除ngx

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

Answer 7

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

Answer 8

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

我不确定原因-就我所知，这与最近的rxjs版本不兼容有关-但是，如果您使用的是该库，则可能是原因。

Answer 9

我改变了：

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

到：

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

Answer 10

对我有用：在CLI中运行以下命令行

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

和

npm install @firebase/app@^0.1.6

Answer 11

我有解决方法：

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

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

TypeError：Object（...）不是函数

11 个答案: