Modules with lazy loading. about ngx-loading-bar HOT 9 CLOSED

Yes indeed.

As @aitboudad indicated, here is the shared module you should have.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { NgLoadingBarModule } from 'ng-loading-bar';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ]
})
export class SharedModule {
  static forRoot() {
    return [
      {ngModule: SharedModule},
      HttpModule,
      NgLoadingBarModule.forRoot(),
    ];
  }
}

Details:

If HttpModule or NgLoadingBarModule are in the exports or providers list in the shared module, a new corresponding instance would be provided by the child injector. The loading bar component wouldn't know about the new instance's 'pending' subject as it has only subscribed to the one provided by the root injector.

from ngx-loading-bar.

Thanks for the link, to fix you issue just ensure that NgLoadingBarModule and HttpModule is only part of root module.

export class SharedModule {
  static forRoot(): any {
    return [
      { ngModule: SharedModule },
      HttpModule,
      NgLoadingBarModule.forRoot(),
    ];
  }
}

from ngx-loading-bar.

@Tolitech could you please provide a plunker reproducing the issue ?

from ngx-loading-bar.

Hello.
I created a very simple structure with root, shared, account...

In this small example, you can identify that the component only appears in the app.component and does not run on the other modules.

Note that the loading-bar-spinner div tag is always display: none with lazy loading modules.

Please export the project and run it locally.
Online is not running (there should be limitations in the online editor).

https://stackblitz.com/edit/angular-vkynnc

from ngx-loading-bar.

Hello,
I get a similar issue with the new alpha 3 :

If I access my app with the root URL and then navigate to a lazy loaded module, the loading bar is well displayed on each HttpClient call.
But if I then refresh my app being in my lazy loaded module (I press F5), I can't see the bar anymore.
It seems that the bar is well displayed only if I load app with the root URL.

Here is my shared module :

export class SharedModule {
  static forRoot() {
    return [
      { ngModule: SharedModule },
      HttpClientModule,
      LoadingBarHttpClientModule,
    ];
  }
}

from ngx-loading-bar.

@spanja
The only way I was able to work with various lazy-loading modules and sharing modules was to put the HttpModule and ngx-loading-bar into the app.module.ts

Remove all references, imports, exports and declarations from anywhere, including the Shared Module.
Just leave it in the app.module that will work correctly.

from ngx-loading-bar.

I get same results with declaring LoadingBarHttpClientModule only in app module.

I'm using the new HttpClientModule instead of HttpModule

from ngx-loading-bar.

@spanja

Sorry for the misunderstanding.
I have tested here and my code happens the same problem that you are facing.

A refresh by a route other than the main one, the loading-bar no longer appears.

Unfortunately I can not help you, just confirm that it is a possible bug in the component.

I think you should open a new issue for the creator.

from ngx-loading-bar.

I'm having the same thing with @spanja is the issue fixed?

from ngx-loading-bar.