Remove tight coupling with Http api about ngx-loading-bar

[aitboudad]

Hi @chihab, thanks for the initial work I'll look into it this week.
what I have in mind is to split this lib into separate packages for (core, http, router):

• @ngx-loading-bar/core
• @ngx-loading-bar/http
• @ngx-loading-bar/router

[chihab]

@thekalinga @aitboudad The advantage of the actual approach is that the loading bar is very easy to intergate. You just import the module and insert the component and that's it.

The idea is to be able to react to any observable start and completion and http request should keep being simple to "monitor" without a lot of boilerplate code.

There is also an issue is that http Observables are cold and request are made as soon as a subscription has been made. Normally something like

this._http.get('/app/heroes');

shouldn't perform the actual request before a call to subscribe has been made on ! Imagine that we're preparing the observable in a constructor and subscription/call is made when an event occurs.

So my idea is that the module would be configurable in order to keep the actual comfort and give the developer the ability to control the loading bar (which could be extended):

NgLoadingBarModule.forRoot({ overrideHttp: true }), // or false

If overrideHttp is true, the HTTP service is overridden and a simple call to this._http.get('/app/heroes'); would trigger the request and the loading bar (developer should be advised about the subscribe issue)

If overrideHttp is set to false, the HTTP service is not overridden, the user has to control when the loading bar should be displayed:

    startHttpRequest() {
        const request$ =
            this._http.get('/app/heroes')
                .map((response) => response.json().data);

        // Since module overrideHttp option is set to false, loading bar won't be displayed automatically

        request$.subscribe(
            (heroes) => this.heroes = heroes,
            (err) => this.loadingService.endLoading(),
            () => this.loadingService.endLoading()
        );

        // We start loading manually only when we've subscribed (or right before)
        this.loadingService.startLoading();

    }

Should work with any Observable

    startTimer() {
        const timer$ = Observable
            .interval(1000)
            .take(10);
        timer$
            .subscribe((value) => this.timer = value + 1);

        // We're sure that subscription has been made, we can start loading bar service
        this.loadingService.startLoading(timer$);
    }

I've made a PR (sorry I should probably have discuss the solution before). :)

[chihab]

Awesome ! especially the @ngx prefix

[aitboudad]

Published under @ngx-loading-bar:

Before:

import { NgLoadingBarModule } from 'ng-loading-bar';

@NgModule({
  imports: [
    ...,
    NgLoadingBarModule.forRoot(),
  ],
})
export class AppModule {
}

After:

import { LoadingBarHttpModule } from '@ngx-loading-bar/http';

@NgModule({
  imports: [
    ...,
    LoadingBarHttpModule,
  ],
})
export class AppModule {
}