Automatic Http loading bar on page refresh

[jidma]

Bug Report or Feature Request (mark with an x)

- [X] bug report -> please search issues before submitting
- [ ] feature request
- [ ] question

OS and Version?

Wimdows 10, Chrome 66

Versions

Angular CLI: 6.0.5
Node: 8.11.2
OS: win32 x64
Angular: 6.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.5 (cli-only)
@angular-devkit/build-angular     0.6.5
@angular-devkit/build-optimizer   0.6.5
@angular-devkit/core              0.6.5 (cli-only)
@angular-devkit/schematics        0.6.5
@angular/cli                      6.0.5
@schematics/angular               0.6.5
@schematics/update                0.6.5
rxjs                              6.2.0
typescript                        2.7.2
webpack                           4.8.3

Repro steps:

I have set up NgProgressRouterModule, NgProgressHttpModule in my app.module:
This works fine when I call my http service using a button clic for example:

  doHttpCall() {
    //.. calling http service
  }

But when I call it at the component initlialization:

ngAfterViewInit() {
    doHttpCall();
}

And then refresh the page, it doesn't work

• the router progress bar shows and then hides correctly
• my http request is still pending but no progress bar is shown.

PS: it works fine when I navigate away from the view and come back, but no routing progress occurs.
It also works when I add a timeout before the http is automatically called and refresh the page.

The log given by the failure

No errors.

Desired functionality

Mention any other details that might be useful

[MurhafSousli]

This is happening because both NgProgressRouterModule and NgProgressHttpModule are using the same NgProgress instance, and the router event is calling complete() before the http request is finished.

I will investigate a way to set progressbar instance for each one

[elvispdosreis]

I'm having a behavior similar to this when I instantiate in app.module.ts NgProgressHttpModule and NgProgressRouterModule the progress bar stops working when I have some HttpClient call in ngAfterViewInit