Угловой 6 прогресс бар службы

Question

Пытаюсь создать службу прогресса, чтобы узнать, сколько это всего и процент загруженных файлов.я написал сервис ниже и зарегистрирую его в разделе провайдера;

import { Injectable } from '@angular/core';
import { Subject, BehaviorSubject } from 'rxjs/Rx'
import { BrowserXhr } from '@angular/http';

@Injectable()
export class ProgressService {
  uploadProgress = new Subject<any>();
  downloadProgress = new Subject<any>();

}


@Injectable()
export class BrowserXhrWithProgress extends BrowserXhr {

  constructor(private service: ProgressService) {
    super();
  }
  build(): XMLHttpRequest {
    var xhr: XMLHttpRequest = super.build();
    xhr.onprogress = (event) => {
      this.service.downloadProgress.next(this.createProgress(event));
    };

    xhr.upload.onprogress = (event) => {
      this.service.uploadProgress.next(this.createProgress(event));
    };
    return xhr;
  }

  private createProgress(event: any) {
    return {
      total: event.total,
      percentage: Math.round((event.loaded / event.total) * 100)
    };
  }
}

я подписываюсь на сервис как показано ниже до загрузки файла;

this.progressService.uploadProgress.subscribe(progress => { console.log(progress) });

, но не могу войтилюбая вещь в консоли.

  { provide: BrowserXhr, useClass: BrowserXhrWithProgress },
   ProgressService

любая идея будет полезна.