TypeError: Object(…) is not a function

Question

working on 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

This works for me, using "angularfire2": "^5.0.0-rc.11"

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

To retrieve the data:

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

Or you can check the GitHub repository for angularfire2 here for more details

Answer 2

I changed from :

"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"

Answer 3

I Have a solution :

Simply you can uninstall two package i.e angularfire2 and firebase

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

Answer 4

Even though you can run rxjs-compat, its only a matter of time before you need to change your code to reflect the new RXJS. If you are using Angular 6 and the Angular 6 CLI, then you will have RXJS 6, since Angular depends on RXJS for most things. Also if you plan on using Angular Material 2, then you will need Angular 6. So lets just update your RXJS. This will be really important as of Ionic 4. Ionic 4 will depend highly on angular as it will now include the Angular Routes.

Some of the most common changes of RXJS 6 is:

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

Becomes

import { of } from 'rxjs';

and

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

becomes

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

and

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

becomes

import { Observable, Subject } from 'rxjs';

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

Answer 5

Recent releases of AngularFire require rxjs 6. Please upgrade rxjs, you'll need to include rxjs-compat if you have dependencies that haven't yet upgraded.

Answer 6

What worked for me:

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

and

npm install @firebase/app@^0.1.6