How to fix "Cannot set property 'bindCallback' of undefined" in Ionic?

Question

I'm trying to create an ionic-3 application that uses google firestore as a database, but I keep getting errors.

I used to get the TypeError: Object(...) is not a function, which after some googling I tried to remedy by installing rsjs and rsjs-compat. Now I get the Cannot set property 'bindCallback' of undefined, even when I remove all of the references to firebase and rsjx in my code.

I have also tried various permutations of import { Observable } from 'rxjs/Observable' and import { Observable } from 'rxjs', but neither of these fix the issue.

My package versions are: (global)

• @angular/cli@7.1.3
• cordova@8.1.2
• ionic@4.5.0
• n@2.1.12

(not-global)

• @angular/core@5.2.11
• typescript@2.6.2
• @angular/fire@5.1.1
• angularfire2@5.1.1
• firebase@5.7.1
• rxjs@6.0.0
• rxjs@6.3.3

Imports:

• import { Component, Injectable } from '@angular/core';

• import { IonicPage, NavController, NavParams } from 'ionic-angular';

• import { AngularFirestore } from 'angularfire2/firestore';

import { Observable } from 'rxjs';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {

  constructor(public navCtrl: NavController, public navParams: NavParams, private fireStore: AngularFirestore) {
      this.chatDoc = fireStore.doc('chats/test-chat')
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad HomePage');
  }

}

Error from Ionic:

Runtime Error

Cannot set property 'bindCallback' of undefined
Stack
TypeError: Cannot set property 'bindCallback' of undefined
at Object.<anonymous> (http://localhost:8100/build/vendor.js:154433:32)
at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
at Object.<anonymous> (http://localhost:8100/build/vendor.js:152110:1)
at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
at Object.<anonymous> (http://localhost:8100/build/vendor.js:49616:10)
at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
at Object.<anonymous> (http://localhost:8100/build/vendor.js:152085:14)
at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)
at Object.<anonymous> (http://localhost:8100/build/vendor.js:48266:10)
at __webpack_require__ (http://localhost:8100/build/vendor.js:55:30)

Ionic Framework: 3.9.2

Ionic App Scripts: 3.2.1
Angular Core: 5.2.11
Angular Compiler CLI: 5.2.11
Node: 10.14.2
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36

Answer 1

As I've read here https://github.com/angular/angular/issues/20095 , the problem was occuring because the typescript is not compatible. updating the typescript should do the work. so run this in cmd (make sure you have installed node.js)

npm install -g typescript@latest

Then it should work ^_^.