Http progess bar with Submodules (lazy loading) and resovlers

[Loghrenar]

Bug Report or Feature Request (mark with an x)

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

OS and Version?

macOS High Sierra 10.13.6

Versions

@angular-devkit/architect 0.12.4 @angular-devkit/build-angular 0.12.4 @angular-devkit/build-optimizer 0.12.4 @angular-devkit/build-webpack 0.12.4 @angular-devkit/core 7.2.4 @angular-devkit/schematics 7.3.1 @angular/cdk 7.3.2 @angular/cli 7.3.1 @angular/material 7.3.2 @ngtools/webpack 7.2.4 @schematics/angular 7.3.1 @schematics/update 0.13.1 rxjs 6.4.0 typescript 3.2.4 webpack 4.28.4

Repro steps

General question (I will create a repo if necessary)

The log given by the failure

No failure

Desired functionality

Hello,

As didn't find any related problems or equivalent my problem, here is what caused me trouble.

I'm currently working on an Angular project, i have many lazy loaded submodules and multiple components with resolvers. I switched from version 5.0.1 to 5.3.2 and I saw that forChild and forRoot were removed. It's not really clear in the documentation about how to handle submodules with NgProgressModule, NgProgressHttpModule.

I declared

    NgProgressModule.withConfig({
      color: '#8969E6',
      ease: 'ease',
      meteor: false,
      spinner: false
    }),
    NgProgressHttpModule,

in my app.module.ts

I imported

    NgProgressModule,
    NgProgressHttpModule,

in my submodule.module.ts (the module containing my layouts where my progress bar are defined). The progress bar shows on the first request but never appear again.

I would know what is the best approach to use NgProgressModule & NgProgressHttpModule with submodules? As I work with resolver too, can it be an issue? As there are no related resources in the documentation, i'm a bit lost, thanks in advance.

[MurhafSousli]

Hi, please add a basic reproduction using a stackblitz

[Loghrenar]

Hi @MurhafSousli,

Here you can find the repo that show you my problem => https://stackblitz.com/edit/angular-dr1fn5 If you go to Issues the progress bar is displayed the first time, if you click an issue, the progess bar doesn't show up

[Loghrenar]

Hey @MurhafSousli,

Do you have any update on this issue? Can I do something else to help you?

[Loghrenar]

Hello @MurhafSousli,

any update on this thread?

[DaVarga]

Fixed your problem by adding the ng-progress component to your app.component.html and removing NgProgressModule and NgProgressHttpModule from the layout.module.ts. Idk if it meets your requirements but works for me. https://stackblitz.com/edit/angular-dqzj25

[Loghrenar]

Hey @DaVarga,

Thank you for your solution! Not really what I expected but it seems easier and it fix my problem anyway, so! However there is still an issue with submodules and resolvers, I think it should works this way or an explanation is needed.

[ggjersund]

This is kind of critical for me. Might I ask why forRoot() was removed?

[hajaniain]

To resolve this issue, import the NgProgressModule.forRoot() in app.module.ts and NgProgressHttpModule in your shared module.

app.module.ts

@NgModule({
  imports:[
    ...
    SharedModule,
    NgProgressModule.forRoot()
  ]
})

shared.module.ts

@NgModule({
  imports:[
    ...
    NgProgressHttpModule
  ],
  exports: [
    NgProgressHttpModule
  ]
})

[MurhafSousli]

@ggjersund @hajaniain forRoot() has been removed since the introduction of providedIn: 'root' in Angular v6, there is no need for it anymore

[MurhafSousli]

I think this can be closed now..