Angular 2 and tracking file upload progress

Question

I need to show a progress-bar when uploading files. After much plagiarising the net, started with the following:

TL;DR

ProgressService is not being injected in CustomBrowserXhr.

The long version:

Extended BrowserXhr

import { ProgressService } from "./progress-service";

@Injectable()
export class CustomBrowserXhr extends BrowserXhr {
  constructor(private service:ProgressService) {
    super();
  }

   build(): any {
     let xhr = super.build();

      xhr.onprogress = (event) => {            
        this.service.downloadProgress.next(event);
      };

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

      return <any>(xhr);
  }
}

The Progress Service

@Injectable()
export class ProgressService {

  downloadProgress: Subject<any> = new Subject();
  uploadProgress: Subject<any> = new Subject();

}

Bootstraping (Elided for brevity)

import { BrowserXhr }               from "@angular/http";
import { CustomBrowserXhr }         from "./services/custom-browser-xhr";
import { ProgressService }          from "./services/progress-service";

@NgModule({
    imports: [ 
       BrowserModule, 
       HttpModule, 
       FormsModule,
       Ng2Bs3ModalModule
    ],
    declarations: [ ],
    providers: [
        ProgressService,
        { provide: BrowserXhr, useClass: CustomBrowserXhr }
    ],
    bootstrap: [ 
        ApplicationComponent        
    ]
})
export class AppModule { }

The issue is, ProgressSerice is not injected in CustomBrowserXhr. Getting the following error:

Uncaught TypeError: Cannot read property 'downloadProgress' of undefined
    at XMLHttpRequest.xhr.onprogress (custom-browser-xhr.ts:16)
    at XMLHttpRequest.wrapFn [as _onprogress] (zone.js:1039)
    at ZoneDelegate.invokeTask (zone.js:275)
    at Object.onInvokeTask (core.umd.min.js:35)
    at ZoneDelegate.invokeTask (zone.js:274)
    at Zone.runTask (zone.js:151)
    at XMLHttpRequest.ZoneTask.invoke (zone.js:345)
xhr.onprogress @ custom-browser-xhr.ts:16
wrapFn @ zone.js:1039
ZoneDelegate.invokeTask @ zone.js:275
onInvokeTask @ core.umd.min.js:35
ZoneDelegate.invokeTask @ zone.js:274
Zone.runTask @ zone.js:151
ZoneTask.invoke @ zone.js:345
resume-service.ts:21 s

Put a break-point on the following line and indeed found service to be null:

this.service.downloadProgress.next(event);