TypeError: Object (...) не является функцией

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

Это случилось со мной, Может быть, вы используете в своем проекте ionic 3, и вы устанавливаете плагины ионной версии 4, если вы используете ionic 3, попробуйте установить свои плагины из https://ionicframework.com/docs/v3/.

Answer 2

Я использую библиотеку rxjs-etc, и по какой-то причине я получал конфликты, которые не только вызвали ошибку TypeError: Object(…) is not a function, но и полностью убили мой процессор в Chrome.

Я не совсем уверенпочему - это связано с несовместимостью последней версии rxjs, насколько я могу судить - но если вы используете эту библиотеку, это может быть причиной этого.

Answer 3

Хотя моя проблема не связана с angularfire, но поиск TypeError: Object(…) is not a function приводит пользователей к этому вопросу.Моя проблема заключалась в том, что я использовал плагин Youtube Video Player в ionic v3.Но так как ионные документы v3 теперь автоматически перенаправляются на ионные документы v4, я использовал последнюю версию плагина.

, просто установите версию 4 плагина Youtube Video Player, и вы готовы к работе.

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

Ionic v3 docs

PS: если вы автоматически перенаправлены на v4 docs ionic, просто вставьте v3 в URL.

Answer 4

если вы получаете после установки любого нового плагина в 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 5

У меня есть решение:

Просто вы можете удалить два пакета, например angularfire2 и firebase

typeError: Object (...) не является функцией ionic

Answer 6

Вам необходимо установить это: Запустите ниже командной строки в CLI

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

Затем импортируйте эти библиотеки в ваш home.ts :

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

Answer 7

Это работает для меня, используя "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 здесь для получения более подробной информации

Answer 8

Несмотря на то, что вы можете запустить rxjs-compat, это всего лишь вопрос времени, когда вам нужно изменить свой код, чтобы он отражал новый RXJS.Если вы используете Angular 6 и Angular 6 CLI, то у вас будет RXJS 6, поскольку Angular в большинстве случаев зависит от RXJS.Также, если вы планируете использовать Angular Material 2, вам понадобится Angular 6. Так что давайте просто обновим ваш RXJS.Это будет действительно важно с Ionic 4. Ionic 4 будет сильно зависеть от угловых, поскольку теперь он будет включать в себя угловые маршруты.

Некоторые из наиболее распространенных изменений 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} из 'rxjs / operator';

и

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 9

В последних версиях AngularFire требуется rxjs 6. Пожалуйста, обновите rxjs, вам нужно будет включить rxjs-compat, если у вас есть зависимости, которые еще не обновлены.

Answer 10

Что сработало для меня: Запустите ниже командной строки в CLI

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

и

npm install @firebase/app@^0.1.6