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.

Good luck!