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"
Ответ 11
Что сработало для меня: запустить ниже командной строки в CLI
npm install [email protected] [email protected]
а также
npm install @firebase/[email protected]^0.1.6
Ответ 12
У меня есть решение:
Просто вы можете удалить два пакета, то есть angularfire2 и firebase
typeError: Object (...) не является функцией ionic