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

работает на 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>

Ответ 1

Это работает для меня, используя "angularfire2": "^5.0.0-rc.11"

npm i [email protected] [email protected] promise-polyfill --save

Чтобы получить данные:

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

Или вы можете проверить репозиторий GitHub для angularfire2 здесь для более подробной информации

Ответ 2

После моих исследований. Эта ошибка вызвана тем, что этот код используется в старой версии angularfire2. Таким образом, вы должны деградировать версию до 5.0.0-rc.2, или вы можете изменить свой код для работы с последней версией.

Установите rxjs latest и найдите весь импорт из "rxjs-compat..." и измените его на "rxjs". обновить другую депиантность.

изменить файл home.ts для извлечения данных

import { Component, Injectable } from '@angular/core';
/*import { NavController } from 'ionic-angular';*/
import { IonicPage } from 'ionic-angular/navigation/ionic-page';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Note } from '../../model/note/note.model';

@Injectable()
@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  itemsRef: AngularFireList<any>;
  items: Observable<Note[]>;
  constructor(db: AngularFireDatabase) {
    this.itemsRef = db.list('note-list');
    this.items = this.itemsRef.snapshotChanges().pipe(
       map(changes =>
         changes.map(c => ({ key: c.payload.key, ...c.payload.val() }))
      )
    );
  }
}

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

Мой проект с использованием firebase 5 и angularfire2 5.0.0-rc.8 на github

https://github.com/bnayak0225/Biswajit-Note

Ответ 3

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

Ответ 4

Несмотря на то, что вы можете запустить 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/

Ответ 5

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

npm i [email protected] [email protected] promise-polyfill --save

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

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

Ответ 6

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

Просто установите версию 4 плагина Youtube Video Player и все готово.

npm install --save @ionic-native/[email protected]

Ionic v3 docs

PS: когда вы автоматически перенаправляетесь на v4 документацию по ionic, просто вставьте v3 в URL.

Ответ 7

если вы получаете после установки любого нового плагина в Ionic 3

затем просто проверьте версию плагина statusbar или splashscreen в файле 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';

Ответ 8

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

Ответ 9

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

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

Ответ 10

Я изменил с:

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

to:

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