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

Question

I am using ngx-progressbar bar in Angular 2 application. When app loading first it is working fine. second time it is showing error. I referred few article like medium.com for s

Answer 1

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!

Answer 2

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

Answer 3

I also faced the same issue, I was using BehaviorSubject and it always saves the last response there are 2 solution for it.

1. Use Subject instead of BehaviorSubject

2. Simply add the below line inside the subscription.

   <your service>.next(undefined);

Also remember to unsubscribe the subscriptions that you have created manually.

I hope this helps.

Answer 4

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.