Angular2 fire listen to node changes throws an error

Question

The code below was working and it should listen for changes in a node and execute a function but now am getting an error:

ncaught TypeError: Object(...) is not a function
at SwitchMapSubscriber.eval [as project] (changes.js:7)

So, in my angular2 component I have:

private subscriptions = new Subscription();

registered: AngularFireList<any>;
constructor(private _af: AngularFireDatabase){
     this.registered = _af.list('/registered');
 }

ngOnInit() {
    this.subscriptions.add(
        this.registered.valueChanges().subscribe(
            res => {
                console.log("the value has changed");
            }
        )
    );
}

So where am I going wrong as getting the error above which point to:

angular2fire/database/list/changes

What I need my code to do is to listen to whenever there is a change in a firebase node and log to the console

The subscriptions have also been defined by:

    private subscriptions = new Subscription();

Adding it to the subscriptions then I can use onDestroy lifecycle and prevent memory leaks as shown below

    ngOnDestroy() {
      this.subscriptions.unsubscribe();
    }

I got a query here. Why are you adding it to subscription? You can just do registered.valueChanges and handle the result right? any specific reason to do so? — Guruprasad J Rao, Jun 05 '18 at 13:01
its so that during destroy i can unsubscribe to the changes preventing memory leaks — Geoff, Jun 05 '18 at 13:04
ive also updated the question with the onDestroy life cycle which unsubscribes any subscriptions — Geoff, Jun 05 '18 at 13:06
Ok.. makes sense.. But within the subscription, you are again subscribing.. Can you just do `return this.registered.valueChanges()`??? — Guruprasad J Rao, Jun 05 '18 at 13:07
but the reults of this.registered.valueChanges() is an observable so youll need to subscribe. Or how do i go about this as i would oinly like to listen for changes and then execute a function whenever changes happen — Geoff, Jun 05 '18 at 13:14
It looks like rxjs version mismatch issue.Maybe the firebase package requires newer version of rxjs — Hikmat G., Jul 04 '18 at 15:39

BlackBeard · Accepted Answer · 2018-07-07T06:09:54.553

This is a popular issue these days. Please upgrade rxjs 5 to version 6.

This happens due to some breaking changes in AngularFire. Once upgraded the function should perform as expected.

Upgrade using: npm install rxjs@6 rxjs-compat@6 --save (Recomended)

Or rollback (Not recomended) using:

npm uninstall angularfire2
npm install angularfire2@5.0.0-rc.4
npm uninstall firebase
npm install firebase@4.8.0

See the rxjs official migration doc for how-to's and more details on the changes between 5 and 6.

ggradnig · Answer 2 · 2018-06-29T07:29:40.440

It seems you don't have a list for your subscriptions, but only a single subscription stored in subscriptions. Try changing it to an array like this:

private subscriptions: Subscription[] = [];

registered: AngularFireList<any>;
constructor(private _af: AngularFireDatabase){
     this.registered = _af.list('/registered');
 }

ngOnInit() {
    this.subscriptions.push(
        this.registered.valueChanges().subscribe(
            res => {
                console.log("the value has changed");
            }
        )
    );
}

ngOnDestroy() {
   this.subscriptions.forEach((s) => s.unsubscribe());
}

With Subscription.add you actually add TeardownLogic to an existing subscription. This can be used when you have additional cleaning up to do.

If you know that you will only have one subscription, use the assignment operator = instead of the add() function, like this:

private subscription: Subscription;

registered: AngularFireList<any>;
constructor(private _af: AngularFireDatabase){
     this.registered = _af.list('/registered');
 }

ngOnInit() {
    this.subscription =
        this.registered.valueChanges().subscribe(
            res => {
                console.log("the value has changed");
            }
     );
}

ngOnDestroy() {
   this.subscription.unsubscribe();
}

this doesnt work, it throws even more errors like this.subscriptions.unsubscribe is not a function — Geoff, Jun 29 '18 at 07:29
If you take a look at my example, I iterate over the subscriptions list using .forEach. You can also have just one subscription and unsubscribe from it, I'll add an example in my answer. — ggradnig, Jun 29 '18 at 07:30
I've added an example with a single subscription below. Please have a look at that. — ggradnig, Jun 29 '18 at 07:34
You can also have a look at the answer given in this answer: https://stackoverflow.com/questions/38008334/angular-rxjs-when-should-i-unsubscribe-from-subscription — ggradnig, Jun 29 '18 at 07:54

Angular2 fire listen to node changes throws an error

2 Answers2

Linked