Search code examples
angularangular2-services

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

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: enter image description here

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.

Solution

  • 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