akserg / ng2-slim-loading-bar Goto Github PK
View Code? Open in Web Editor NEWAngular 2 component shows slim loading bar at the top of the page.
License: MIT License
Angular 2 component shows slim loading bar at the top of the page.
License: MIT License
Hi I get the following error:
zone.js:461 Unhandled Promise rejection: Error: Can't resolve all parameters for SlimLoadingBar: (?).
at new BaseException (http://localhost:4200/vendor/@angular/compiler/src/facade/exceptions.js:27:23)
at CompileMetadataResolver.getDependenciesMetadata (http://localhost:4200/vendor/@angular/compiler/src/metadata_resolver.js:314:19)
at CompileMetadataResolver.getTypeMetadata (http://localhost:4200/vendor/@angular/compiler/src/metadata_resolver.js:195:26)
at CompileMetadataResolver.getDirectiveMetadata (http://localhost:4200/vendor/@angular/compiler/src/metadata_resolver.js:157:28)
at eval (http://localhost:4200/vendor/@angular/compiler/src/metadata_resolver.js:230:62)
at Array.map (native)
at CompileMetadataResolver.getViewDirectivesMetadata (http://localhost:4200/vendor/@angular/compiler/src/metadata_resolver.js:230:27)
at RuntimeCompiler._getCompiledTemplate (http://localhost:4200/vendor/@angular/compiler/src/runtime_compiler.js:99:36)
at RuntimeCompiler._getTransitiveCompiledTemplates (http://localhost:4200/vendor/@angular/compiler/src/runtime_compiler.js:117:80)
at eval (http://localhost:4200/vendor/@angular/compiler/src/runtime_compiler.js:120:77)
Evaluating http://localhost:4200/main.js
Error loading http://localhost:4200/main.js ; Zone: <root> ; Task: Promise.then ; Value: Error: Error: Can't resolve all parameters for SlimLoadingBar: (?).
I'm using the angular cli and RC4.
My appComponent looks like this:
import { Component } from '@angular/core';
import { PersonComponent } from './person/person.component';
import { ROUTER_DIRECTIVES } from '@angular/router';
import {SlimLoadingBar, SlimLoadingBarService,} from 'ng2-slim-loading-bar/ng2-slim-loading-bar';
@Component({
moduleId: module.id,
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
directives: [PersonComponent, ROUTER_DIRECTIVES, SlimLoadingBar],
})
export class AppComponent {
constructor(private slimLoadingBarService:SlimLoadingBarService) { }
startLoading() {
// We can listen when loading will be completed
this.slimLoadingBarService.start(() => {
console.log('Loading complete');
});
}
}
The template like this:
<ng2-slim-loading-bar></ng2-slim-loading-bar>
<button (click)="startLoading()">Start Loading</button>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a [routerLink]="['fichery']" class="navbar-brand"><i class="fa fa-ship" aria-hidden="true"></i> Fichery</a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav navbar-right">
<li><a [routerLink]="['events']"><i class="fa fa-calendar" aria-hidden="true"></i> Events</a></li>
<li><a [routerLink]="['people']"><i class="fa fa-user" aria-hidden="true"></i> People</a></li>
<li><a [routerLink]="['organizations']"><i class="fa fa-sitemap" aria-hidden="true"></i> Organizations</a></li>
<li><a [routerLink]="['files']"><i class="fa fa-picture-o" aria-hidden="true"></i> Images</a></li>
<li><a [routerLink]="['about']"><i class="fa fa-info" aria-hidden="true"></i> About</a></li>
</ul>
</div>
</div>
</div>
<div class="container" style="padding-top: 5em">
<router-outlet></router-outlet>
</div>
and the main.ts:
import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppComponent, environment } from './app/';
import { HTTP_PROVIDERS } from '@angular/http';
import { appRouterProviders } from './app/app.routes';
import { disableDeprecatedForms, provideForms } from "@angular/forms";
import {SlimLoadingBarService} from 'ng2-slim-loading-bar/ng2-slim-loading-bar';
if (environment.production) {
enableProdMode();
}
bootstrap(AppComponent, [disableDeprecatedForms(), provideForms(), appRouterProviders, HTTP_PROVIDERS, SlimLoadingBarService]);
Any idea what might be wrong?
I'm submitting a ... (check one with "x")
[ ] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[x ] feature request
The package seems to be working fine with Angular 5. Can you could just update the dependencies so that npm shrinkwrap won't complain? Thank you.
In package.json file angular version is locked to 2.1.2.
Does this library working only with angular 2.1.2?
Current angular version is 2.3.0. I got may warnings and red text in console that complains at angular version in this package.
Can we get slim loader with higher angular version in package.json?
Hello,
Can you please provide information on how to load this loading bar with rest call so that when i load any component it should ?
Is this supposed to work with angular-rc.1? I can't get it to work despite the docs.
I'm trying to use the bundles/ng2-slim-loading-bar.min.js
file which I managed to get loaded with systemjs, however this file still has dependencies from the angular-beta version "angular2/core", "angular2/src/facade/lang", "angular2/common"
.
Hy..
Your component is amazing. But, it does not work with the latest release of angular 2 (RC4)
Hello,
I'm submitting a ... (check one with "x")
[X] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request
Current behavior
My angular2 project is using ng2-slim-loading-bar and as such it is referenced in package.json and systemjs config file and other ts files.
I tried to upgrade from 2.0.4 to 2.0.5 (using npm) and I had some issues in firefox and chrome (see below).
I've no need for switching to 2.0.5 for now so I'll stay to 2.0.4 but tell me if I can be of any help.
Error message in the firefox console :
Error: patchProperty/desc.set/wrapFn@http://manager.loc/node_modules/zone.js/dist/zone.js:698:26
ZoneDelegate.prototype.invokeTask@http://manager.loc/node_modules/zone.js/dist/zone.js:265:21
Zone.prototype.runTask@http://manager.loc/node_modules/zone.js/dist/zone.js:154:28
ZoneTask/this.invoke@http://manager.loc/node_modules/zone.js/dist/zone.js:335:28
Error loading http://manager.loc/traceur
Error loading http://manager.loc/node_modules/ng2-slim-loading-bar/index.js as "ng2-slim-loading-bar" from http://manager.loc/app/app.module.js
Chrome console has a similar error :
GET http://manager.loc/traceur 404 (Not Found)
scheduleTask @ zone.js:1382
ZoneDelegate.scheduleTask @ zone.js:245
Zone.scheduleMacroTask @ zone.js:171
(anonymous) @ zone.js:1405
send @ VM889:3
fetchTextFromURL @ system.src.js:1156
(anonymous) @ system.src.js:1739
ZoneAwarePromise @ zone.js:518
(anonymous) @ system.src.js:1738
(anonymous) @ system.src.js:2764
(anonymous) @ system.src.js:3338
(anonymous) @ system.src.js:3605
(anonymous) @ system.src.js:3990
(anonymous) @ system.src.js:4453
(anonymous) @ system.src.js:4705
(anonymous) @ system.src.js:408
ZoneDelegate.invoke @ zone.js:232
Zone.run @ zone.js:114
(anonymous) @ zone.js:502
ZoneDelegate.invokeTask @ zone.js:265
Zone.runTask @ zone.js:154
drainMicroTaskQueue @ zone.js:401
ZoneTask.invoke @ zone.js:339
(index):37 Error: Error: XHR error (404 Not Found) loading http://manager.loc/traceur
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://manager.loc/node_modules/zone.js/dist/zone.js:698:29)
at ZoneDelegate.invokeTask (http://manager.loc/node_modules/zone.js/dist/zone.js:265:35)
at Zone.runTask (http://manager.loc/node_modules/zone.js/dist/zone.js:154:47)
at XMLHttpRequest.ZoneTask.invoke (http://manager.loc/node_modules/zone.js/dist/zone.js:335:33)
Error loading http://manager.loc/traceur
Error loading http://manager.loc/node_modules/ng2-slim-loading-bar/index.js as "ng2-slim-loading-bar" from http://manager.loc/app/app.module.js
Some people tend to say that this error could come from systemjs so here is my config
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function(global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
map: {
...
'ng2-slim-loading-bar': 'npm:ng2-slim-loading-bar',
...
},
packages: {
...
'ng2-slim-loading-bar': {
main: 'index.js',
defaultExtension: 'js'
},
...
}
});
})(this);
Expected/desired behavior
Same as in 2.0.4
Reproduction of the problem
Difficult to say, maybe specificaly linked to my project but I don't think I'm using it in a border line way.
What is the expected behavior?
What is the motivation / use case for changing the behavior?
Please tell us about your environment:
ng2-translate version: nope
Angular version: 2.0.0
Browser: Chrome 55 | Firefox 50
Language: TypeScript 2 transpiled to ES5
Not sure why I get this error. I am using the systemJs.config
paths: {
// paths serve as alias
'npm:': 'node_modules/', 'ng2-slim-loading-bar': 'npm:ng2-slim-loading-bar',
'ng2-slim-loading-bar': { defaultExtension: 'js' },
I'm submitting a ... (check one with "x")
[x ] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request
Current behavior
Sometimes, an exception is raised after starting the loading bar :
Exception raised : zone.js:140 Uncaught Error: Error in ./SlimLoadingBarComponent class SlimLoadingBarComponent - inline template:3:32 caused by: Expression has changed after it was checked. Previous value: '0'. Current value: '1'.
It is not in each case and I really don't know what can trigger this error.
I have to add that as said here I do not have the problem when is enable Prod Mode...
But in dev mode (local dev), I get this errors.
Expected/desired behavior
No error.
Reproduction of the problem
If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar.
What is the expected behavior?
What is the motivation / use case for changing the behavior?
Please tell us about your environment:
ng2-slim-loading-bar version: 2.0.5
Angular version: 2.0.2
Browser: [all]
Language: [TypeScript 2.0.2]
I'm submitting a ... (check one with "x")
[ x] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request
Current behavior
Expected/desired behavior
As the address bar url changes to return to a previous displayed page, the highlight/underline of the currently active progress bar item changes.
Reproduction of the problem
Run your online demo using the steps previously described steps.
What is the expected behavior?
As you click the browser's back button, the corresponding slim loading bar link should become highlighted/underlined and the previous slim loading bar link should no longer be highlighted/underlined.
What is the motivation / use case for changing the behavior?
To make sure the visual experience of the slim loading bar matches what is happening in the brower's address bar url.
Please tell us about your environment:
(your built-in demo)
ng2-slim-loading-bar version: x.x.x
(whatever version of your tool you use in your own online demo)
Angular version: 2.X.X
Browser: [all | Chrome 55 | Firefox 50 | IE 11 | Edge
Language: [all | TypeScript X.X | ES6/7 | ES5]
(whatever you use in your online demo)
New RC5 Router with added but transition not effect this way construct
`export class AppComponent implements OnInit, OnDestroy {
private sub: Subscription;
constructor(private slimLoader: SlimLoadingBarService, private router: Router) {}
ngOnInit() {
this.runSlimLoader();
this.sub = this.router.events.subscribe(events => {
this.runSlimLoader();
}, (error: any) => {
this.slimLoader.complete();
});
}
runSlimLoader() {
this.slimLoader.start();
setTimeout(() => {
this.slimLoader.complete();
}, 1000);
}
ngOnDestroy() {
this.sub.unsubscribe();
}
}`
I'm submitting a ... (check one with "x")
[ ] bug report => check the FAQ and search GitHub for a similar issue or PR before submitting
[ ] support request => check the FAQ and search GitHub for a similar issue before submitting
[x] feature request
Current behavior
currently, the slim loading bar goes from left to right
Expected/desired behavior
it would be great if it could start in the middle then go both ways like LinkedIn
Hi,
We have super fast app which still requires slim loading bar. We use this tool, but the requests are finished much faster than slim loading bar shows it.
It happens because there is
public interval:number = 500; // in milliseconds
in your code.
Can you please make this parameter configurable? I would like to set 100 milliseconds.
I'm submitting a ... (check one with "x")
[ ] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[x] feature request
Current behavior
Intervals are executed using setInterval()
.
Expected/desired behavior
Intervals use RxJS Observable.interval()
.
What is the motivation / use case for changing the behavior?
It's best practice. Also, Subscription
is a more "Angular way" and can be used to terminate the interval.
I'm submitting a ... (check one with "x")
[ ] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[x ] feature request
the package seems to be working fine with angular 4, had no issues, if you could just update the dependencies that would be gr8.
I am trying to set slimLoadingBarService.progress
from jQuery plugin imagesLoaded
event but its not updating the progress until it finishes that event. Is there any way to set this progress value from outside angular and refreshes the loading bar immediately without any delay?
I can use Module in DEV environment, but after I minimize it with "browserify -s main dist/app/main.js > dist/bundle.js" command, I get the error "(index):40 Error: (SystemJS) Cannot read property 'toString' of undefined(…)" on my PROD env.
It happens after I include the module:
SlimLoadingBarModule.forRoot()
Hello!
Thank you for this great module!
However, the animation by default is very discreet. Is it possible to make it smoother? This will better reflect our branding.
I hasn't been able to find anything related to animation customization in the README.
Thanks!
Hi,
thank you for this component. How would I use it with @angular/http?
In angular 1 I use this: https://chieffancypants.github.io/angular-loading-bar/
VM7584:237 Uncaught TypeError: Cannot read property 'Injectable' of undefined at eval (eval at webpackJsonp.18.module.exports (addScript.js:9), <anonymous>:237:74) at Object.module.exports (eval at webpackJsonp.18.module.exports (addScript.js:9), <anonymous>:241:2) at __webpack_require__ (eval at webpackJsonp.18.module.exports (addScript.js:9), <anonymous>:30:30) at Object.__webpack_exports__.a (eval at webpackJsonp.18.module.exports (addScript.js:9), <anonymous>:257:84) at __webpack_require__ (eval at webpackJsonp.18.module.exports (addScript.js:9), <anonymous>:30:30) at Object.eval (eval at webpackJsonp.18.module.exports (addScript.js:9), <anonymous>:359:90) at __webpack_require__ (eval at webpackJsonp.18.module.exports (addScript.js:9), <anonymous>:30:30) at eval (eval at webpackJsonp.18.module.exports (addScript.js:9), <anonymous>:76:18) at eval (eval at webpackJsonp.18.module.exports (addScript.js:9), <anonymous>:79:10) at webpackUniversalModuleDefinition (eval at webpackJsonp.18.module.exports (addScript.js:9), <anonymous>:9:34)
Line no 237: webpack_require.i(WEBPACK_IMPORTED_MODULE_0__angular_core["Injectable"])(),
this line has a problem how to fix it.? I am using angular 4
When using this construction:
this.loadingBar.start(() => {
console.log('completed');
});
the complete callback is not called, it seems that you did not implemented it in your source code
start(onCompleted:Function = null) {
// Stop current timer
this.stop();
// Make it visible for sure
this.visible = true;
// Run the timer with milliseconds iterval
this._intervalCounterId = setInterval(() => {
// Increment the progress and update view component
this.progress++;
// If the progress is 100% - call complete
if (this.progress === 100) {
this.complete();
}
}, this.interval);
}
**I'm submitting a
[] bug report
[x] support request
[] feature request
Is it possible for the loading bar component to be in the parent while I call the start and complete methods from the child component?
working great with function like goToPage(){
this.slimLoadingBarService.start();
}
but what if Someone want to navigate to some page and show indicator ?? here i want to use [routerLink]="['test']" and also want to start loading bar
Mi system-config.ts:
const packages: any = {
"ng2-slim-loading-bar": {
"defaultExtension": "js"
}
};
const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
cliSystemConfigPackages[barrelName] = { main: 'index' };
});
System.config({
map: {
'@angular': 'vendor/@angular',
'rxjs': 'vendor/rxjs',
'main': 'main.js',
'@vaadin': 'vendor/@vaadin',
'ng2-slim-loading-bar':'node_modules/ng2-slim-loading-bar'
},
packages:cliSystemConfigPackages
});
System.config({ map, packages });
Error : zone.js:101 GET http://localhost:4200/node_modules/ng2-slim-loading-bar 404 (Not Found)
zone.js:461 Unhandled Promise rejection: Error: XHR error (404 Not Found) loading http://localhost:4200/node_modules/ng2-slim-loading-bar
at XMLHttpRequest.wrapFn as _onreadystatechange
at ZoneDelegate.invokeTask (http://localhost:4200/vendor/zone.js/dist/zone.js:356:38)
at Zone.runTask (http://localhost:4200/vendor/zone.js/dist/zone.js:256:48)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:4200/vendor/zone.js/dist/zone.js:423:34)
Error loading http://localhost:4200/node_modules/ng2-slim-loading-bar as "ng2-slim-loading-bar" from http://localhost:4200/main.js ; Zone: ; Task: Promise.then ; Value: Error: Error: XHR error (404 Not Found) loading http://localhost:4200/node_modules/ng2-slim-loading-bar(…)
Thank you @akserg for your updates (2.0.1)!
I'm testing and I'have find some bugs.
When I try to change the loading bar properties in the template with this code:
<ng2-slim-loading-bar [color]="blue" [height]="4px"></ng2-slim-loading-bar>
I have an error concerning [height]:
Parser Error: Unexpected token 'px' at column 2 in [4px] in AppComponent@0:37 ("<ng2-slim-loading-bar [color]="blue" [ERROR ->][height]="4px"></ng2-slim-loading-bar)
If I try to remove [height]="4px", it works but the bar is green instead of blue.
And another problem:
this.slimLoadingBarService.complete();
Seems not to work. Nothing happens (the bar is not showing).
Hoping that this report can help you!
Ben
Excluding the .ts
(not d.ts
) files from the npm package appears to create problems for builds because the sourcemaps included with the package refer to them.
Can you either include ts source files or change the generated sourcemaps? I think including the .ts
source doesn't do too much harm as the project is fairly small, angular itself however chose to use smaller (i.e. useless) sourcemaps that point to the d.ts files.
See also:
angular/angular-cli#2364 (comment)
The service export present in the NgModule breaks Angular's module imports:
exports: [SlimLoadingBarComponent, >> SlimLoadingBarService <<]
Services should only be provided
, notexported
. For reference see the Angular 2 Modules FAQ.
This leads to the following error:
Unexpected value 'SlimLoadingBarService' exported by the module 'SlimLoadingBarModule'
As a temporary workaround, we can use declarations and providers instead of the module import.
EDIT: added description after GitHub mistakenly sent the issue when I only wanted to start a new line
I'm submitting a ... (check one with "x")
[ +] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request
Current behavior
I am using this library and i found that the rest calls are getting called twice or some time more. For conformation i disabled this library and found that now only one call is happening.
Expected/desired behavior
Reproduction of the problem
If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar.
What is the expected behavior?
What is the motivation / use case for changing the behavior?
Please tell us about your environment:
ng2-slim-loading-bar version: x.x.x
Angular version: 2.X.X
Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
Language: [all | TypeScript X.X | ES6/7 | ES5]
I'm submitting a ...
[X] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request
Current behavior
Not working due to error No provider for EventEmitter!
Probably related to #32
Expected/desired behavior
Should be working in angular2 v 2.4.7
ng2-slim-loading-bar version: 2.X.X, 2.2.0
Angular version: 2.4.7
Browser: all
Language: TypeScript
I'm submitting a ...
[x] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[x] feature request
Current behavior
When used in inside a component with changeDetection: ChangeDetectionStrategy.OnPush
loading bar does not work.
Reproduction of the problem
Place <ng2-slim-loading-bar></ng2-slim-loading-bar>
inside a template of a component with changeDetection: ChangeDetectionStrategy.OnPush
. Try start() - progress is updated, but component view is not reflecting that.
What is the expected behavior?
SlimLoadingBarComponent component should have changeDetection: ChangeDetectionStrategy.OnPush
. It needs to inject private cd: ChangeDetectorRef
and at the end of this.service.events.subscribe
it should call this.cd.markForCheck();
What is the motivation / use case for changing the behavior?
This makes the component usable when changeDetection: ChangeDetectionStrategy.OnPush
is used. Note that with redux/ngrx this change detection is very common.
Please tell us about your environment:
ng2-slim-loading-bar version: 4.0.0
Angular version: 4.0.1
Browser: all
Language: all
Thanks for sharing these great ng2 components. Forgive me if this is a silly question. I'm still learning Angular which sometimes gives me a hard time.
When I look in src/slim-loading-bar.component.js
I can see the template HTML code in there. I can also find it in bundles/index.umd.js
as well as in my end product (built with ng built --prod --aot
).
I think that means that ngc
didn't compile the template and it still needs to be compiled, probably in the browser. Which means slower startup times and the overhead of including the compiler client-side.
The templates of my own app-components cannot be found in the generated code, they seem to be compiled into JavaScript.
Since you know a lot more about Angular 2 than me. Is this correct? Is there a way to optimize this process?
I'd like to be able to set the color and height on the component selector like this:
<ng2-slim-loading-bar [color]='color' [height]='height'>
color
and height
being string variables set in my app component constructor. I see @Inputs
in the component for those variables so I thought I could do something like that, but it doesn't work. If I set anything like that on the selector nothing loads if I call this.slimLoadingBarService.start()
, it only works if I don't try to change the color/height. Anyway to do this without having to call this.slimLoadingBarService.color='blue'
, etc.?
I'm submitting a ... (check one with "x")
[x] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request
Current behavior
Currently it is not possible to use this package with Angular Universal Server Side Rendering. During compiling I'm getting error:
some_path/client/dist/ngfactory/node_modules/ng2-slim-loading-bar/style.css.shim.ngstyle.ts:9
export const styles:any[] = ['.slim-loading-bar[_ngcontent-%COMP%] {\n position: fixed;\n margin: 0;\n padding: 0;\n top: 0;\n left: 0;\n right: 0;\n z-index: 99999;\n}\n\n\n.slim-loading-bar-progress[_ngcontent-%COMP%] {\n margin: 0;\n padding: 0;\n z-index: 99998;\n background-color: green;\n color: green;\n box-shadow: 0 0 10px 0; \n height: 2px;\n opacity: 0;\n\n \n -webkit-transition: all 0.5s ease-in-out;\n -moz-transition: all 0.5s ease-in-out;\n -o-transition: all 0.5s ease-in-out;\n transition: all 0.5s ease-in-out;\n}'];
^^^^^^
SyntaxError: Unexpected token export
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:542:28)
at Module._extensions..js (module.js:579:10)
Expected/desired behavior
Make Angular Universal "friendly"
I also tried to compile whole ng2-slim-loading-bar package into 2015 with babel, but it didn't work.
ng2-slim-loading-bar version: 4.0.0
Angular version: 4.3.0
The moduleId
added in ae237f0 crashes WebPack builds with the following error message:
Uncaught TypeError: t.match is not a function
While this is a known bug in the angular compiler (angular/angular#10626), it's still something worth noting I think.
I'm submitting a ... (check one with "x")
[x] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request
Current behavior
After 50 seconds, the bar completes, even thought it wasn't asked to stop
Expected/desired behavior
It should decrease the rate of change of the bar until completed. It should be able to be showing (and "growing") for an indefinite amount of time (see youtube slim loading bar)
ng2-slim-loading-bar version: 4.0.0
Angular version: 4.4.3
Browser: all
Language: all
hi Guys,
After doing npm import, I checked the folders, but I couldn't index file that means no -> index.ts or index.d.ts or no index.js file?? can you please tell me what is the problem?
Error: Error: XHR error (404 Not Found) loading http://localhost:8000/node_modules/ng2-slim-loading-bar/index.js(…)
I'm submitting a ... (check one with "x")
[ ] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[x] feature request
Current behavior
Couldn't find setting to modify speed.
Expected/desired behavior
feature which allow me to change the speed of progressbar
Please tell us about your environment:
ng2-slim-loading-bar version: 2.3.0
Angular version: 2.4.0
Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
Language: [all | TypeScript X.X | ES6/7 | ES5]
I'm submitting a ... (check one with "x")
[X] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request
Current behavior
It makes some Tests fail for unknown Reason, here are some outputs of failing tests:
create
✖ submits data in correct form
PhantomJS 2.1.1 (Mac OS X 0.0.0)
Error: No provider for EventEmitter! (line 2906)
✖ can create new message with valid data
PhantomJS 2.1.1 (Mac OS X 0.0.0)
Error: No provider for EventEmitter! (line 2906)
✖ returns error for invalid data
PhantomJS 2.1.1 (Mac OS X 0.0.0)
Error: No provider for EventEmitter! (line 2906)
Expected/desired behavior
Those Test should not fail. It worked perfectly fine with the version 2.0.4, which we are currently using for a temporary fix
Reproduction of the problem
If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar.
As we do not know the reason for the failing tests, I will just copy paste some tests into here.
Example Test:
describe('create', () => {
it('submits data in correct form', () => {
HttpMockHelpers.mockResponseSuccess(mockBackend, MockMessageService.getMockDataOne(0));
mockBackend.connections.subscribe((connection: MockConnection) => {
expect(connection.request.method).toBe(RequestMethod.Post);
expect(_.isArray(JSON.parse(connection.request.getBody()).data)).toBeFalsy();
});
service.create(testMessages[0]);
});
it('can create new message with valid data', () => {
HttpMockHelpers.mockResponseSuccess(mockBackend, MockMessageService.getMockDataOne(0));
let response;
service.create(testMessages[0]).subscribe(f => response = f);
expect(response).toEqualData(testMessages[0]);
});
it('returns error for invalid data', () => {
let message = new Message({
subject: 'Message name'
});
let errorMsg = 'Required messages are missing';
let response;
HttpMockHelpers.mockResponseError(mockBackend, errorMsg);
service.create(message).subscribe(null, err => response = err.body);
expect(response).toEqualData(errorMsg);
});
});
What is the expected behavior?
All tests should run fine
Please tell us about your environment:
Mac OS X Sierra 10.12.2
Angular 2 Project, Jasmine with Karma Plugin as Testing framework
Hi, when doing a production build with systemjs-builder:
Error on fetch for npm:[email protected]/index.js at file://[PROJECT-PATH]/jspm_packages/npm/[email protected]/index.js
Loading src/app/app.module.ts
Loading src/main.ts
Error: ENOENT: no such file or directory, open '[PROJECT-PATH]/jspm_packages/npm/[email protected]/index.js.map'
at Error (native)
/jspm_packages/npm/[email protected]/index.js
contains //# sourceMappingURL=index.js.map
at the end of the file.
I'm getting warnings using this with WebPack. Seems to be complaining that no *.ts files exist in the package:
WARNING in ./~/ng2-slim-loading-bar/index.js
Cannot find source file 'index.ts': Error: Cannot resolve 'file' or 'directory' ./index.ts in C:\redacted\node_modules\ng2-slim-loading-bar
WARNING in ./~/ng2-slim-loading-bar/src/slim-loading-bar.component.js
Cannot find source file 'slim-loading-bar.component.ts': Error: Cannot resolve 'file' or 'directory' ./slim-loading-bar.component.ts in C:\redacted\node_modules\ng2-slim-loading-bar\src
WARNING in ./~/ng2-slim-loading-bar/src/slim-loading-bar.service.js
Cannot find source file 'slim-loading-bar.service.ts': Error: Cannot resolve 'file' or 'directory' ./slim-loading-bar.service.ts in C:\redacted\node_modules\ng2-slim-loading-bar\src
WARNING in ./~/ng2-slim-loading-bar/src/slim-loading-bar.utils.js
Cannot find source file 'slim-loading-bar.utils.ts': Error: Cannot resolve 'file' or 'directory' ./slim-loading-bar.utils.ts in C:\redacted\node_modules\ng2-slim-loading-bar\src
Child html-webpack-plugin for "index.html":
I'm submitting a ... (check one with "x")
[X ] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request
Current behavior
Loading bar is triggered and everything is pretty nice, except the fact I'm getting this exception in the console:
SlimLoadingBarComponent.html:3 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '0%'. Current value: '15%'. at viewDebugError (core.es5.js:8633) at expressionChangedAfterItHasBeenCheckedError (core.es5.js:8611) at checkBindingNoChanges (core.es5.js:8775) at checkNoChangesNodeInline (core.es5.js:12329) at checkNoChangesNode (core.es5.js:12303) at debugCheckNoChangesNode (core.es5.js:12922) at debugCheckRenderNodeFn (core.es5.js:12862) at Object.eval [as updateRenderer] (SlimLoadingBarComponent.html:3) at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:12844) at checkNoChangesView (core.es5.js:12125) at callViewAction (core.es5.js:12487)
It happens only in one case in my app, sadly I can't even try reproduce it, as it's huge private logic...
Expected/desired behavior
No exceptions when triggering loadig-bar at all times.
What is the expected behavior?
What is the motivation / use case for changing the behavior?
Please tell us about your environment:
angular-cli setup
ng2-slim-loading-bar version: 4.0.0
Angular version: 4.*
Browser: ALL
Language: TS
Is there an option to programatically make loading bar fill from right to left? I know it's possible to tamper with the css to change the direction but I was thinking if it was possible to do that dynamically and through the code.
Exception in Chrome:
Type 'Observable<{}>' is not assignable to type 'Observable<SlimLoadingBarEvent>'.
Hey,
Your package seems to not be AoT compatible:
Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function
.
I don't know why it happens but I do know it has to do with the definition of the .forRoot()
method.
When I try to set up ng2-slim-loading-bar, I got an error in this line :
directives: [SlimLoadingBarComponent],
The error is :
The argument of type "{guidelines: typeof SlimLoadingBar Component [];}" is not attributable to the type of parameter 'ComponentMetadataType'.
I'm using angular2 rc6. What am I doing wrong ?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.