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 subscribe object. I did't get clearly. I need to make progress bar every time when click the router links.

I attached error snapshot:

progress bar code:

import { Component, AfterContentInit} from '@angular/core';
import { NgProgress } from 'ngx-progressbar'
@Component({
  selector: 'link-outlet',
  template: '<ng-progress [showSpinner]="false"></ng-progress>'
})
export class RoutingDirectiveComponent implements AfterContentInit{
  constructor(private ngProgress: NgProgress) {

  }
  ngAfterContentInit(){

   this.ngProgress.start();
   setTimeout(()=>{
     this.ngProgress.done();
   }, 2000);
  }
 }

Your suggestion will be grateful.

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.

Answer 2

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.

Answer 3

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 router change event there is a feature module NgProgressRouterModule

If you are using the progress for http requests there is a feature module NgProgressHttpModule

Update

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

Answer 4

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.