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!

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.