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.

Asante

Answer 1

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

Connective

Thanks for your response. could you please give some example to create that in root component or any article or links to do that. – Asante

@MathankumarK Just add <ng-progress></ng-progress> in AppComponent template, and start/stop the progress using NgProgressService anywhere in your app – Connective

Answer 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.

Fascinate

this is great, i wasn't even realizing i was doing that, awesome thanks – Secundine

A nice show of unsubscribing to the subscription, rather than the event. – Iceman

i don't know why this answer is not on top – Chuppah

Answer 3

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.

Dyslogistic

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.

Aylesbury