ObjectUnsubscribedError: object unsubscribed error when I am using ngx-progress in angular 2

Updated - Angular 8

This answer is still valid syntactically for Angular 8.


I realize this is an old post, we're on Angular 6 now, I believe. However, I got this error and wanted to post a solution.

I had this problem when I called .unsubscribe() directly on the object that I had called .subscribe() on. However, when you subscribe to an event, that method hands back a Subscription typed value. You need to save this (possibly on your component's class), then call unsubscribe on that Subscription object when you're done.

Examples

Bad Code:

this.someEvent.subscribe(() => {
    // DO SOMETHING
})
...
this.someEvent.unsubscribe()

Good Code:

this.myEventSubscription = this.someEvent.subscribe(() => {
     // DO SOMETHING
})
...
this.myEventSubscription.unsubscribe()

Again, you need to unsubscribe from the Subscription object that the .subscribe() method returns when you call it.

Good luck!


I really liked the way @kbpontius told, so I am also doing the same approach

Whenever you subscribe, subscribe in the new variable. So after unsubscribe it can be subscribed Examples

Bad Code:

this.someEvent.subscribe(() => {
    // DO SOMETHING
})
...

ngOnDestroy() {
     this.someEvent.unsubscribe()
}

Good Code:

Declare the event name

myEventSubscription: any;

//Now it can be use like this

this.myEventSubscription = this.someEvent.subscribe(() => {
     // DO SOMETHING
})

...

//Now unsubcribe this in last phase of destroying component. You can destroy in other function too if you want to destroy the service in the same component

ngOnDestroy() {
  this.myEventSubscription.unsubscribe()
}

Again, you need to unsubscribe from the Subscription object that the .subscribe() method returns when you call it.


This is happening because the component that holds the progressbar is being destroyed while the progressbar is running, so you should put <ng-progress></ng-progress> in a root component (or a component that does not get destroyed)

If you are using the progress for http requests there is a new feature called automagic progressbar, you might want to try it out!

Update

Since v2.1.1, you can use the component anywhere without getting that error