murhafsousli / ngx-progressbar

Angular progress bar ☄

ngx-progressbar's Issues

Multiple progress on one template

I'm submitting a ... (check one with "x")

[ ] bug report => search for a similar issue before submitting
[ ] feature request
[x] question

Is it possible to have multiple progress on one template? and if it is possible could you please point me to right direction to use it?

Allow user to set max percentage

Instead of hardcoding the percentage, allow the user to set the max percentage at which the auto increment would stop. Similar to minimum

Is current NgProgressBrowserXhr xhr event override safe ?

I'm submitting a ... (check one with "x")

[ ] bug report => search for a similar issue before submitting
[ ] feature request
[ x] question

Minimal usage of the plugin
I was wondering if it is safe to assign events to the xrh request in NgProgressBrowserXhr. Could this accidentally override other events bound by Angular ?

Unmet peer dependencies for newer angular versions

thanks for the progressbar, I get the following error, when I try to use a newer Angular version. You should configure it properly in the package.json.

Automagic loading not working

The automagically bar is not working properly. I'm doing as shown below.
I also added <ng-progress></ng-progress> into my template. When I start the loading bar manually as described in the docs it's fine.

For my http requests I use the angular http class and I'm on angular release 4.0.2.

import {HttpModule, BaseRequestOptions, BrowserXhr} from '@angular/http';
import {NgProgressModule, NgProgressCustomBrowserXhr} from "ng2-progressbar";

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        //...
        NgProgressModule
    ],
    providers: [
        {
            provide: BrowserXhr,
            useClass: NgProgressCustomBrowserXhr
        }
        //...
    ],
    bootstrap: [AppComponent]
})

Any ideas? Thanks. :)

error has no exported member 'NgProgressCustomBrowserXhr'

ngx-progressbar -> error has no exported member 'NgProgressCustomBrowserXhr'

object unsubscribed error

could you help me?

Is it possible to reposition the spinner ?

Is there any way of specifying a custom css class to adjust the spinner position ?

Thanks !

Uncaught Error: Unexpected value 'e' imported by the module 'SharedModule'

Hello!

I'm trying to implement your version of NProgress in my app, but am currently running into some problems.

I have a shared module that all other modules import. I added your progressbar like this to it:

import { NgProgressModule } from 'ng2-progressbar';

@NgModule({
  imports: [
    CommonModule, 
    HttpModule, 
    RouterModule,
    FormsModule,
    ReactiveFormsModule,
    TranslateModule.forRoot(),
    AccordionModule,
    NgProgressModule
  ],
  declarations: [
  ],
  exports: [
    CommonModule, 
    HttpModule, 
    FormsModule, 
    ReactiveFormsModule,
    TranslateModule,
    AccordionModule,
    NgProgressModule
  ],
  providers: [
      TranslateService
  ]
})

But as soon as I do that, I get the following error in the console:
Uncaught Error: Unexpected value 'e' imported by the module 'SharedModule'

Am I doing something wrong?

Property 'progress' is private and only accessible within class 'ProgressComponent'.

Hi,

When upgrade to Angular-4 anf angular\cli 1.0.0 got this error:
ERROR in C:/GitRepository/src/$$_gendir/node_modules/ng2-progressbar/components/progress/progress.component.ngfactory.ts (1,1): Property 'progress' is private and only accessible within class 'ProgressComponent'.

Need to change this property to public. AOT (which is enabled via --prod) requires that any property/field/function accessed from within a template be public. This is an Angular restriction. Previously this would only be represented as either a runtime error or unexpected behavior (depending on the usage).

see #5623

Thanks.

[ShowSpinner] property

I'm submitting a ... (check one with "x")

[x ] bug report => search for a similar issue before submitting
[ ] feature request
[ ] question

Minimal usage of the plugin
When using [showSpinner]="'false'" property with inner quotation ('') the spinner is still shown. But passing a Boolean instead of a string => [showSpinner]="false" works as intended. Update doc.

ERROR in NgProgressModule is not an NgModule

Hi, cool module but I have a problem.
An error has started to appear after update angular-cli from .21 to 1.0.0-beta.24

"dependencies": {
"@angular/common": "2.4.1",
"@angular/compiler": "2.4.1",
"@angular/core": "2.4.1",
"@angular/forms": "2.4.1",
"@angular/http": "2.4.1",
"@angular/material": "^2.0.0-alpha.11-3",
"@angular/platform-browser": "2.4.1",
"@angular/platform-browser-dynamic": "2.4.1",
"@angular/router": "^3.3.1",
"angular-cli": "1.0.0-beta.24",
"angular2-cookie": "^1.2.6",
"core-js": "^2.4.1",
"file-saver": "^1.3.3",
"flexboxgrid": "^6.3.1",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"lodash": "^4.17.2",
"muicss": "^0.9.7",
"ng2-pagination": "^1.0.1",
"ng2-progressbar": "^1.0.3",
"ng2-translate": "^5.0.0",
"object-fit-images": "^2.5.9",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.2",
"zone.js": "0.7.4"
},
"devDependencies": {
"@angular/compiler-cli": "2.4.1",
"@types/jasmine": "^2.5.38",
"@types/lodash": "^4.14.44",
"codelyzer": "^2.0.0-beta.3",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.7.0",
"karma": "1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.1.0",
"karma-remap-istanbul": "^0.4.0",
"protractor": "4.0.14",
"ts-node": "1.7.2",
"tslint": "^4.1.1",
"typescript": "2.0.10"
}
}

Using in progress component twice failed: object unsubscribed

Hello,
I using in your ng-progress component, and I have to implement it twice because I have two design for other screens in my application.
But it failed on error : "object unsubscribed " because you are call to unsubscrive in the service when the progress component destroy, and the service is singleton....
How can I implement the progress for two other design?

Thanks,
Chagit.

SystemJS Starter: Error XHR 404 loading (traceur) "ng2-progressbar"

When loading my app, after importing ng2-progressbar, I get the following

Systemjs.config file:

App.module.ts file:

Object Unsubscribed Error

when i call API for logout, i have error ObjectUnsubscribedError at NgProgressService.updateState, can help me fix this

How to disable the background when ng-progressbar is enabled?

how can i make the background inactive when ng-progressbar is enabled?

Upgrade and Rename package to ngx-progressbar

@MurhafSousli, first off, thank you for this package. It's awesome.

I was wondering if you would consider upgrading to the latest Angular version and renaming this package to ngx-progressbar to comply with the "Just Angular" idea (http://angularjs.blogspot.com/2016/12/ok-let-me-explain-its-going-to-be.html)

If you would like some help doing this, I'd be more than happy to contribute.

Progress Bar not disappearing

Hey,

I am using your progress bar with a custom Http implementation, like this:

import {Http, RequestOptions, ConnectionBackend, RequestOptionsArgs, Request, Response} from "@angular/http";
import {NgProgressService} from "ng2-progressbar";
import {Observable} from "rxjs/Observable";

export class CustomHttp extends Http {
    private static pendingRequests: number = 0;

    constructor(_backend: ConnectionBackend, _defaultOptions: RequestOptions, private pService: NgProgressService) {
        super(_backend, _defaultOptions);
    }

    request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
        console.log("START: " + (<Request>url).url + " | " + CustomHttp.pendingRequests);

        if (CustomHttp.pendingRequests === 0) {
            this.pService.start();
        }

        CustomHttp.pendingRequests++;

        let req = super.request(url, options).share(); //.publishLast().refCount();

        let requestEnded = () => {
            console.log("DONE: " + (<Request>url).url + " | " + CustomHttp.pendingRequests);
            // on complete
            if (CustomHttp.pendingRequests === 1) {
                // this.pService.done();
                setTimeout(() => {
                    if (CustomHttp.pendingRequests === 0) {
                        console.info("CLOSING");
                        this.pService.done();
                    }
                }, this.pService.trickleSpeed);
            }
            CustomHttp.pendingRequests--;
        };

        req.subscribe(() => {
        }, requestEnded, requestEnded);

        return req;
    }
}

Somewhat I can't manage to get the progressbar to disappear properly.
This is the output that I get in the console:

06:12:42.091 START: /i18n/en/index.json | 0  app.js:889:9
06:12:42.340 DONE: /i18n/en/index.json | 1  app.js:896:13
06:12:42.852 START: i18n/en/entities.json | 0  app.js:889:9
06:12:42.857 START: /rest/ | 1  app.js:889:9
06:12:43.052 DONE: i18n/en/entities.json | 2  app.js:896:13
06:12:48.100 DONE: /rest/ | 1  app.js:896:13
06:12:48.402 CLOSING

Why's that? I am calling .done() on the NgProgressService, but nothing happens.

Progress bar gets stuck after one time.

Hello,

Pretty cool project here. However, when I use this project and simple call start(), then done(), then start() again, the progress bar doesn't animate.

After debugging, the this.trickling$.next(); seems to have lost its subscriber.
When I make this fix, the problem goes away:

I change the subscribe in progress.service.ts constructor to the following:
.subscribe(() => { });

Can we get this fixed so I don't have my own copy of the src?

Thanks!

spinner runs invisible in background while there is no progress

Hello,

thats not a real problem, but you have constant cpu consumption on 0,5 to 1% on your browser window,
when nothing seems to happen on the website.

If you deactivate the spinner (showSpinner = false), "div class="spinner-icon"" isn't rendered -> no cpu consumption

ObjectUnsubscribedError when changing the route from one component to other component

errors.ts:42 ERROR Error: Uncaught (in promise): ObjectUnsubscribedError: object unsubscribed
ObjectUnsubscribedError: object unsubscribed
at new ObjectUnsubscribedError (ObjectUnsubscribedError.js:19)
at Subject._subscribe (Subject.js:94)
at Subject.Observable.subscribe (Observable.js:56)
at ObservableStrategy.createSubscription (async_pipe.ts:33)
at AsyncPipe._subscribe (async_pipe.ts:117)
at AsyncPipe.transform (async_pipe.ts:129)
at Object.eval [as updateDirectives] (e.html:10)
at Object.debugUpdateDirectives [as updateDirectives] (services.ts:273)
at checkAndUpdateView (view.ts:345)
at callViewAction (view.ts:700)
at new ObjectUnsubscribedError (ObjectUnsubscribedError.js:19)
at Subject._subscribe (Subject.js:94)
at Subject.Observable.subscribe (Observable.js:56)
at ObservableStrategy.createSubscription (async_pipe.ts:33)
at AsyncPipe._subscribe (async_pipe.ts:117)
at AsyncPipe.transform (async_pipe.ts:129)
at Object.eval [as updateDirectives] (e.html:10)
at Object.debugUpdateDirectives [as updateDirectives] (services.ts:273)
at checkAndUpdateView (view.ts:345)
at callViewAction (view.ts:700)
at resolvePromise (zone.js:468)
at resolvePromise (zone.js:453)
at zone.js:502
at ZoneDelegate.invokeTask (zone.js:265)
at Object.onInvokeTask (ng_zone.ts:253)
at ZoneDelegate.invokeTask (zone.js:264)
at Zone.runTask (zone.js:154)
at drainMicroTaskQueue (zone.js:401)
at HTMLAnchorElement.ZoneTask.invoke (zone.js:339)

Object Unsubscribe issue

error_handler.js:54 EXCEPTION: Uncaught (in promise): Error: Error in :0:0 caused by: object unsubscribed
Error: Error in :0:0 caused by: object unsubscribed
at ViewWrappedError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:1137:33)
at ViewWrappedError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:35470:16)
at ViewWrappedError.WrappedError [as constructor] (http://localhost:4200/vendor.bundle.js:35535:16)
at new ViewWrappedError (http://localhost:4200/vendor.bundle.js:70097:16)
at CompiledTemplate.proxyViewClass.DebugAppView.rethrowWithContext (http://localhost:4200/vendor.bundle.js:110165:23)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:110138:18)
at ViewRef.detectChanges (http://localhost:4200/vendor.bundle.js:71024:20)
at RouterOutlet.activate (http://localhost:4200/vendor.bundle.js:76532:42)
at ActivateRoutes.placeComponentIntoOutlet (http://localhost:4200/vendor.bundle.js:29796:16)
at ActivateRoutes.activateRoutes (http://localhost:4200/vendor.bundle.js:29763:26)
at http://localhost:4200/vendor.bundle.js:29699:58
at Array.forEach (native)
at ActivateRoutes.activateChildRoutes (http://localhost:4200/vendor.bundle.js:29699:29)
at ActivateRoutes.activateRoutes (http://localhost:4200/vendor.bundle.js:29743:22)
at http://localhost:4200/vendor.bundle.js:29699:58

Unable to intercept requests permeating from "@angular/http"

Setup to the project has been accomplished successfully in angular 4.3.0 project and the tag has been placed in index.html but when there is an http request,the interception does not occur,thus the progress bar does not show although it's present in the dom when checked using chrome devtools.

Automagic loading but hiding the bar for certain petitions

I'm submitting a ... (check one with "x")

[ ] bug report => search for a similar issue before submitting
[x] feature request
[x] question

Hi there,
I'm "Automagicly loading" the progress bar and it's very cool and working very nice, although among all my petititions I have one of them that is very recurrent (every 8 seconds) and I would like to hide the progress-bar only for it. Is it possible?

Thanks a lot

System.config.js

great lib mate! anyway would like know on Map and packages for system.config.js since running error Not Found.

GET http://localhost:3000/node_modules/ng2-progressbar 404 (Not Found)

../node_modules/ngx-progressbar/index"' has no exported member 'NgProgressCustomBrowserXhr'.

Hi,

I am getting an error on ng build command which stated as follows:

WARNING in ./src/app/app.module.ts
52:49-75 "export 'NgProgressCustomBrowserXhr' was not found in 'ngx-progressbar'
....../node_modules/ngx-progressbar/index"' has no exported member 'NgProgressCustomBrowserXhr'.

It use to work well, before I deleted the node_modules folder and reinstall all dependencies today (used npm install) - and I use ng-cli

version used: "ngx-progressbar": "^2.0.0"
I also upgraded to version 2.0.3 but same error persist

object unsubscribed

Hello,

Just following simple setup, I get the following error
Using Angular CLI

 inline template:10:10 caused by: object unsubscribed

quicksearch component

import { NgProgressService } from "ng2-progressbar";

 public constructor( private router: Router,
                      private store: Store<any>,
                      private searchService: SearchService,
                      private pService: NgProgressService
                      ) {

 search() {
    this.searchTerm = this.mainSearchForm.value.searchTerm;
    if(this.searchTerm){
      this.pService.start();
      this.searchService.advancedSearch({searchTerm: this.searchTerm, searchType: 'all', pageNum: 1})
        .subscribe(({data}) => {
          this.pService.done();
          this.store.dispatch({
            type: UPDATESTATE,
            payload: {
              "total": data.search.total,
              "result": data.search.result,
            
          })
        });
    }
    this.router.navigate(['searchResults']);
  }

template

 <ng-progress [color]="'#40A9F5'"></ng-progress>

Thanks in advanced

Unsubscribe error with Angular 4 and ng2-progress component

When using ng2-progress with routing and observable in Angular 4, ng2-progress cause errors with unsubscribe.

How to get the current progress value?

hi.

may to add event callback to progressbar.
on start
on end
on progress (percentage)

:)

Add css class for color

Hello,
How can I assign a css class to the color of the progress bar?
I ask because my bar is degraded with several colors

If I override the .ng-progress class with my styles and assign the color as well [color]="'transparent'", the bar goes good out but always with 100% loaded
Thank you

Property 'colors' does not exist on type 'NgProgressService'

It seems to me that you've removed multi-colored progress bar from your code.

constructor(private progressService: NgProgressService) {
    this.progressService.colors = ['#CE4B45', '#4C8AE6', '#60B25C', '#F0C146'];
}

The above .colors property is now throwing an error.

Property 'colors' does not exist on type 'NgProgressService'

By seeing your repo, it seems that you've removed this property.

spinner

[showSpinner]="'false'" not working in Auto HTTP request

1.1.6 AOT failing in ProgressComponent

AOT is failing in the ProgressComponent because 'progress' is injected as a private but is being referenced in the template.

Error at /compiled/node_modules/ng2-progressbar/components/progress/progress.component.ngfactory.ts:222:93: Property 'progress' is private and only accessible within class 'ProgressComponent'.

How to display the progress of the HTTP request in the lazy module

I want to use it for routing progress in the root module, and display the progress of the HTTP request in the lazy module.how can i do it?Thank you very much!

Initiate on route change?

Is there a way to initiate the progress when changing routes in Angular?

ngx-progressbar relies on @angular/http

I'm submitting a bug report

If you remove the use of the old @angular/http, ngx-progressbar complains that it can't find the BrowserXhr class.

npm update always results in update of ng2-progressbar

Every time I do an npm update I get:

npm update
[email protected] client\src\main\webapp
`-- [email protected]

So it seems my npm always updates ng2-progressbar to version 1.3.0, even though it is already installed in the latest version.

Unable to override "top" property in .spinner class

Unable to override "top" property in .spinner class

change readme - example for 'showSpinner'

hi,

I have found a small mistake in the readme (show-spinner value should be boolean and no string):

README.md: [showSpinner]="'false'"
should be: [showSpinner]="false"

Do not use v2.0.2 in AOT

v2.0.2 is not working in AOT, Use v2.0.0 until it is fixed.

Error occur when using angular 2 routing

EXCEPTION: Uncaught (in promise): Error: Error in ./e class e - inline template:9:6 caused by: object unsubscribed
Error: Error in ./e class e - inline template:9:6 caused by: object unsubscribed

I am new in angular2,
when I use ng progress bar in my angular 2 project then there is no error occur but when I use routing then throw an error which is mentioned above, when I commit " " then project works normally, please fix it,

progress transition animation

This issue was introduced in v1.2.0

Progressbar only show once

I'm submitting a Question (check one with "x")

[ ] bug report => search for a similar issue before submitting
[ ] feature request
[ X] question

my customer HttpProvider

import { Injector } from '@angular/core';
import { Http, XHRBackend, RequestOptions } from '@angular/http';
import { JhiEventManager, JhiInterceptableHttp } from 'ng-jhipster';

import { AuthInterceptor } from './auth.interceptor';
import { LocalStorageService, SessionStorageService } from 'ng2-webstorage';
import { AuthExpiredInterceptor } from './auth-expired.interceptor';
import { ErrorHandlerInterceptor } from './errorhandler.interceptor';
import { NotificationInterceptor } from './notification.interceptor';
import { NgProgressService } from 'ngx-progressbar';

export function interceptableFactory(
    backend: XHRBackend,
    defaultOptions: RequestOptions,
    localStorage: LocalStorageService,
    sessionStorage: SessionStorageService,
    injector: Injector,
    eventManager: JhiEventManager,
    progressService: NgProgressService
) {
    return new JhiInterceptableHttp(
        backend,
        defaultOptions,
        [
            new AuthInterceptor(localStorage, sessionStorage, progressService),
            new AuthExpiredInterceptor(injector),
            // Other interceptors can be added here
            new ErrorHandlerInterceptor(eventManager),
            new NotificationInterceptor(injector)
        ]
    );
};

export function customHttpProvider() {
    return {
        provide: Http,
        useFactory: interceptableFactory,
        deps: [
            XHRBackend,
            RequestOptions,
            LocalStorageService,
            SessionStorageService,
            Injector,
            JhiEventManager,
            NgProgressService,
        ]
    };
};

import { Observable } from 'rxjs/Observable';
import { RequestOptionsArgs, Response } from '@angular/http';
import { LocalStorageService, SessionStorageService } from 'ng2-webstorage';
import { JhiHttpInterceptor } from 'ng-jhipster';
import { NgProgressService } from 'ngx-progressbar';

export class AuthInterceptor extends JhiHttpInterceptor {

    constructor(
        private localStorage: LocalStorageService,
        private sessionStorage: SessionStorageService,
        private progressService: NgProgressService
    ) {
        super();
    }

    requestIntercept(options?: RequestOptionsArgs): RequestOptionsArgs {
        console.log(Date.now);
        this.progressService.start();
        const token = this.localStorage.retrieve('authenticationToken') || this.sessionStorage.retrieve('authenticationToken');
        if (!!token) {
            options.headers.append('Authorization', 'Bearer ' + token);
        }
        return options;
    }

    responseIntercept(observable: Observable<Response>): Observable<Response> {
        return observable.finally(() => {
            console.log(Date.now);
            this.progressService.done();
        }); // by pass
    }

}

**the progressbar only show when page first loading ,
**

Support HttpClient

I'm submitting a ...

[ ] bug report => search for a similar issue before submitting
[X] feature request
[ ] question

Automagic right now does not support the new HttpClient. Could you provide an HttpClient edition?

Great library, thank you for your work!

Edit:
Temporarily you could update the README with @adrienlamotte's solution, providing that code snippet, with addition how to wire up an app with an http interceptor. Or I can submit a PR for that :)

Any way to load when bootstrapping?

Hi, I have implemented this loader seamlessly into our project. Thanks for the great module!

Is it possible and how would I go about using it to show the loading bar when the app first bootstraps/loads?

RTL version

I need your project but in RTL version, can you implement this feature. thanks

Add context next to progress bar

Is there a way to add context next to spinner ?

Like "Upload is in progress"

XMLHttpRequest is not defined at NgProgressBrowserXhr.BrowserXhr.build

I followed the updated instructions for the automagic loading bar and get the following error:

XMLHttpRequest is not defined at NgProgressBrowserXhr.BrowserXhr.build

Cannot find name 'BrowserXhr'

Trying to add the provider like described in the README

import { NgProgressBrowserXhr } from 'ngx-progressbar';

@NgModule({
 providers: [
   // ...
   { provide: BrowserXhr, useClass: NgProgressBrowserXhr } ,
 ],
 imports: [
   // ...
   NgProgressModule
 ]
})

my editor says Cannot find name 'BrowserXhr'.

z-index for pregressbar

Can you guys just increase the z-index of host element to more then 1030 so that it should visible to the screen currently this bar is rendering below the topnav which has z-index 1030 (not visible).