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>
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
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.
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/
You need to install this: Run below command line in CLI
npm i rxjs@6 rxjs-compat@6 promise-polyfill --save
Then import these libs to your home.ts:
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';
Though my issue isn't related to angularfire but searching for
TypeError: Object(…) is not a function brings users to this question.
My issue was that I was using Youtube Video Player plugin in ionic v3. But as ionic v3 docs are now auto redirected to ionic v4 docs I was using the latest version of the plugin.
just install version 4 of Youtube Video Player plugin and you are good to go.
npm install --save @ionic-native/youtube-video-player@4
P.S: when you are auto redirected to v4 docs of ionic just insert v3 in the URL.
if you are getting after installing any new plugin in ionic 3
then just check the version of statusbar or splashscreen plugin in package.json file
"@ionic-native/splash-screen": "~4.17.0",
"@ionic-native/status-bar": "~4.17.0",
and change the version of your installed plugin to same and do
npm update
it will look like this
"@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",
Hope it helps someone ...... worked for me for android permission and camera plugin
also, you will need to remove ngx from import statement
import { Camera, CameraOptions } from '@ionic-native/camera';
Its happend to me, Maybe you are using in your project ionic 3 , and you installing plugins of ionic version 4, if you are using ionic 3 ,try to install your plugins from https://ionicframework.com/docs/v3/.
I'm using the rxjs-etc library and I was getting conflicts for some reason that not only caused the error TypeError: Object(…) is not a function but also absolutely killed my CPU in Chrome.
I'm not exactly sure why - it's related to a recent rxjs version being incompatible as far as I can tell - but if you're using this library it can be a cause of this.
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"
What worked for me:Run below command line in CLI
npm install angularfire2@5.0.0-rc.6 firebase@4.13.1
and
npm install @firebase/app@^0.1.6
I Have a solution :
Simply you can uninstall two package i.e angularfire2 and firebase
来源：https://stackoverflow.com/questions/50348643/typeerror-object-is-not-a-function