devyumao / angular2-busy Goto Github PK
View Code? Open in Web Editor NEWShow busy/loading indicators on any promise, or on any Observable's subscription.
Home Page: http://devyumao.github.io/angular2-busy/demo/asset/
License: MIT License
Show busy/loading indicators on any promise, or on any Observable's subscription.
Home Page: http://devyumao.github.io/angular2-busy/demo/asset/
License: MIT License
Is it possible to add a cancel button on the template to destroy/cancel the progress indicator?
Looks like the delay and minDuration values are being ignored.
[ngBusy]="{busy: busy, message: 'Searching...', backdrop: true, delay: 200, minDuration: 600}"
Severity Code Description Project File Line Suppression State
Error TS6059 Build:File 'Portal/src/Portal1/node_modules/angular2-busy/index.ts' is not under 'rootDir' 'Portal/src/Portal1/app'. 'rootDir' is expected to contain all source files.
hello,
Using the version 2.0.4 and angular cli, I am getting Uncaught (in promise): Error: Runtime compiler is not loaded.
The error only rise when I try to use angular cli and the flag --prod
Regards
I am using angular - > 2.3.0 version, I downloaded angular2-busy and then imported it to app module and then used it in my html file, component.
After I save the component file its creating a new folder inside my build directory with src folder and all my changes are going inside that folder not into my build directory that I refereed in my tsconfig.json file:
my tsconfig.json file:
{
"compilerOptions": {
"outDir": "build/dist/app",
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"noEmitHelpers": true
},
"compileOnSave": true,
"exclude": [
"node_modules",
"build"
]
}
Above tsconfig.json upon saving of typescript file its used to do tfs checkout and then write the changes into the build/dist/app folder, but after i downloaded angular2-busy everything is breaking all my changes are going inside my build/dist but its creating src folder structure again inside build/dist.
Angular2-busy is completely breaking my working application. any help is appreciated.
It's works fine with firefox when forcing reload (angular 2.2) but in chrome for some reason it doesn't and crash the tab .
ps i'm using it with observables
Seems like RC5 breaks this wonderful lib. Please look if it need some fixes, because there is already some discussions about caused problem, don't sure if they rely to this error thrown by angular2-busy.
angular/angular#15342
angular/angular#15241
angular/angular#15350
Hey,
I run a pretty complex application and need to dynamically change the subscriptions inside busy. This works quite well sometimes and sometimes not.
Sometimes, I don't understand why, I receive a maximum call stack inside the equals method.
error_handler.js:53 RangeError: Maximum call stack size exceeded
at equals (util.js:70)
at equals (util.js:76)
at equals (util.js:76)
at equals (util.js:76)
at equals (util.js:76)
at equals (util.js:76)
at equals (util.js:76)
at equals (util.js:76)
at equals (util.js:76)
at equals (util.js:76)
Any ideas how to deal with it? :(
Any idea why am I getting below error
[email protected]?main=browser:1274
GET http://localhost/node_modules/angular2-busy/ 403 (Forbidden)
ERROR Error: Uncaught (in promise): Error: Found the synthetic property @fadeinout.
Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.
how to fix it
This package is failing to work for me with the following warning, and ultimately fails to import BusyModule. Any help??? Please Log warnings I am getting during installing:
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\ch
okidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.0.17: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"
})
npm WARN [email protected] requires a peer of @angular/core@~2.0
.0 but none was installed.
npm WARN [email protected] requires a peer of @angular/common@~2
.0.0 but none was installed.
npm WARN [email protected] requires a peer of @angular/compiler@
~2.0.0 but none was installed.
npm WARN [email protected] requires a peer of @angular/platform-
browser@~2.0.0 but none was installed.
npm WARN [email protected] requires a peer of @angular/http@~2.0
.0 but none was installed.
npm WARN [email protected] requires a peer of zone.js@~0.6.13 bu
t none was installed.
npm info ok
my code......
component.html
component.ts
this.busy = this.service.login(this.username, this.password)
.delay(5000)
.finally(() => this.OnComplete())
.subscribe(
resp => this.ResultOnLogin(resp),
error => this.LogError('Login ...', error));
this.busy_config = {'busy': this.busy, 'message': 'Attendere prego...', 'backdrop': true, delay: 200, minDuration': 2000};
backdor works, spinner and message does not showing.
Thanks for your help
Hi,
Am getting this error after importing BusyModule in my root application module
I installed the package and add it also to systemjs.config:
` var map = {
'dist': 'dist', // 'dist',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs',
'primeng': 'node_modules/primeng',
'ng2-bootstrap': 'node_modules/ng2-bootstrap',
'moment': 'node_modules/moment/moment.js',
'angular2-cookie': 'node_modules/angular2-cookie',
'@angular/http/testing': 'node_modules/@angular/http/bundles/http-testing.umd.js',
'angular2-busy': 'node_modules/angular2-busy'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'dist': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
'angular2-cookie': { main: 'core.js', defaultExtension: 'js' },
'primeng': { defaultExtension: 'js' },
'ng2-bootstrap': { main: 'ng2-bootstrap.js', defaultExtension: 'js' },
'angular2-busy': { main: 'index.js', defaultExtension: 'js' }
};`
My config :
angular-cli: 1.0.0-beta.17
node: 5.6.0
os: win32 x64
I'am trying to customize the oading spinner like indicated in the doc by adding :
BusyModule.forRoot( new BusyConfig({ message: 'Don\'t panic!', backdrop: false, template:
But when i do that the loading spinner do longer works, and i have no error in the console.`
Hi,
I installed the pacakge and add it also to systemjs.config:
var map = {
'app': 'app', // 'dist',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs',
'jquery': 'node_modules/jquery/dist/jquery.js',
'bootstrap': 'node_modules/bootstrap/dist/js/bootstrap.js',
'jquery-ui': 'node_modules/jquery-ui/jquery-ui.js',
'daterangepicker': 'node_modules/daterangepicker/daterangepicker.js',
'moment': 'node_modules/moment/moment.js',
'primeng': 'node_modules/primeng',
'angular2-busy': 'node_modules/angular2-busy'
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
'primeng': { defaultExtension: 'js' },
'moment': { defaultExtension: 'js' },
'angular2-busy': { main: 'index.js', defaultExtension: 'js' },
and got this error:
localhost/:41 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/node_modules/angular2-busy/build/src.js(…)
I will thank you for your help...
The module angular2-dynamic-component is no longer necessary as angular supports this feature
now directly with NgComponentOutlet.
angular2-busy should use the angular feature directly instead of a additional module
ERROR in BusyModule is not an NgModule
index.ts:
export * from './src';
angular2-busy:
node_modules
index.ts
package.json
README.md
src:
MISSING
Hi, I'm using [email protected] and [email protected]. I have followed the readme to customize the BusyModule in app.module as below:
import {NgModule} from '@angular/core';
import {BusyModule, BusyConfig} from 'angular2-busy';
@NgModule({
imports: [
// ...
BusyModule.forRoot(
new BusyConfig({
message: 'Don\'t panic!',
backdrop: false,
template: `
<div>{{message}}</div>
`,
delay: 200,
minDuration: 600
})
)
],
// ...
})
export class AppModule
however, when I run the application with ng serve
, I got the error:
ERROR in Error encountered resolving symbol values statically. Calling function 'BusyConfig', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in C:/WebApp/src/app/app.module.ts, resolving symbol AppModule in C:/WebApp/src/app/app.module.ts, resolving symbol AppModule in C:/WebApp/src/app/app.module.ts
Please help.
It looks like styles and animations are not showing on mobile devices (iPhone 7 plus, iOS 10.3)
PC works fine, but for the same site on mobile I get display issues:
http://pasteboard.co/2DQKkErg7.png
http://pasteboard.co/2DQYsT8Ks.png
Angular has been upgraded from version 2 to 4. Still, this library is called angular2-busy. I anticipate transparency issues going forward.
Got "Error: Runtime compiler is not loaded" in component using angular2-busy in ng build -prod
I am trying to use it with system.config.js, it does not seem to work.
We are using ngrx/store in our application which has a central state upon which reducer actions mutate this state async via the ngrx/effects. So in the components we do not have the http promises directly. Instead we have an observable state in which we also have a isLoading boolean. What I would like to do is to bind a component to this boolean and display only if it resolves to true (might even do that multiple times for some pages). Does anyone know a clean solution for this scenario?
function loadCrewDutyListStartedHandler(state: DutyState,
payload: { period: TimePeriod, crewId: string }) {
return { ...state, isLoading: true };
}
function loadCrewDutyListSuccessHandler(state: DutyState,
payload: { params: { period: TimePeriod, crewId: string }, result: Array<CrewDuty>}) {
return { ...state, isLoading: false, crewDutyList: payload.result };
}
So how would you attach the busy indicator if you can only bind to the observable/promise but not tot the returned boolean value? In the code below it does not help to bind to the duties$ variable since it will resolve directly (based on the current state).
@Component({
selector: 'resource-duty-list',
templateUrl: 'duty-list.component.html'
})
export class DutyListComponent implements OnInit, OnDestroy {
duties$: Observable<Array<CrewDuty>>;
constructor(private store: Store<IAppState>) {}
ngOnInit(): void {
this.duties$ = this.store.map(s => s.resource.duty.crewDutyList);
_etc._
Hi! Thank you for this component! It's very usefull when working sith API.
But can you help me with one issue:
I use my template for loader:
BusyModule.forRoot(`
new BusyConfig({
message: '{{Please wait}}',
template: '<div class="loading_msg"><div id="logo-animation" class="logo-animation"></div>p>{{message}}</p></div>',
wrapperClass: 'loading_wrap'
})
)
in my component template i use
<div class="content" [ngBusy]="{busy: busy, message: 'my loading message...'}">
and it works just fine.
But how can i insert variable instead of 'my loading message...' ?
When I run "ng build --prod" it works fine.
However, when I add the --aot flag, it fails with: "Unexpected value 'BusyModule' imported by the module 'AppModule'.
I suppose the issue is this?
https://medium.com/@isaacplmann/getting-your-angular-2-library-ready-for-aot-90d1347bcad#.4rzfryi7p
The README.md says:
import {NgModule} from '@angular/core';
import {BusyModule, BusyConfig} from 'angular2-busy';
@NgModule({
imports: [
// ...
BusyModule.forRoot(
...
})
)
],
// ...
})
export class AppModule
Angular 4 complains that
ERROR in Error encountered resolving symbol values statically. Calling function 'BusyConfig', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function,
Tried to move to separate function like that and it did not help.
import {NgModule} from '@angular/core';
import {BusyModule, BusyConfig} from 'angular2-busy';
function getBusyConfig() {
return new BusyConfig({
...
});
}
@NgModule({
imports: [
// ...
BusyModule.forRoot(getBusyConfig())
)
],
// ...
})
export class AppModule
Look at ng2-toastr (https://github.com/PointInside/ng2-toastr) how they solved this configuration issue.
You have to do:
export class CustomOption extends ToastOptions {
animate = 'flyRight'; // you can override any options available
newestOnTop = false;
showCloseButton = true;
}
// app.module.ts
import { CustomOption } from './custom-option';
@NgModule({
declarations: [ ... ],
imports: [
...
ToastModule.forRoot(),
],
providers: [
{provide: ToastOptions, useClass: CustomOption},
...
],
bootstrap: [ ... ]
})
Hi,
The backdrop and the indicator are displaying on the entire screen instead of the just the div that include the [ngBusy] property. The div display a table and I want that the indicator apply just on this table - like the demo . But the backdrop and the indicator are displaying on the entire screen.
The div:
Hello,
Thanks for your post.
I am getting the following errors
GET http://localhost:1065/angular2-busy 404 (Not Found)
(index):25 Error: Error: XHR error (404 Not Found) loading http://localhost:1065/angular2-busy(…)
Is this c0mpatible with rc7?
Thanks for your help!
I'm getting this error.
zone.js:355 Unhandled Promise rejection: Template parse errors:
Can't bind to 'componentInputData' since it isn't a known property of 'DynamicComponent'. ("erClass" *ngIf="isActive()" @flyinout>
<DynamicComponent [componentTemplate]="template" [ERROR ->][componentInputData]="context">
"):
@sielay fixed that problem in his commit 6735557
Plz merge this to avoid that problem to others.
when i run ngc -p ./tsconfig.aot.json
error!
below:
Error: Error File '/Users/heqiang/WebstormProjects/Bmodule/node_modules/angular2-busy/index.ts' is not under 'rootDir' '/Users/heqiang/WebstormProjects/Bmodule/client'. 'rootDir' is expected to contain all source files.
`
"@angular/common": "2.1.2",
"@angular/compiler": "2.1.2",
"@angular/compiler-cli": "2.1.2",
"@angular/core": "2.1.2",
"@angular/forms": "2.1.2",
"@angular/http": "2.1.2",
"@angular/platform-browser": "2.1.2",
"@angular/platform-browser-dynamic": "2.1.2",
"@angular/platform-server": "2.1.2",
"@angular/router": "3.1.2",
"@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.10",
"angular2-busy": "^1.0.2",
`
i want to put busy icon at different place based on screen ,so I used wrapperClass attribute to override the custom CSS.
BusyModule.forRoot(new BusyConfig({
message: 'Please wait...??????',
backdrop: true,
delay: 200,
minDuration: 600,
wrapperClass:'ng-busy2'
}))
This custom class is copy of ng2-busy with top attribute changed for ng-busy2-default-spinner class.
.ng-busy2-default-spinner div {
position: absolute;
left: 44.5%;
top: 0%;
width: 10%;
height: 26%;
background: #666;
border-radius: 50px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
opacity: 0;
-webkit-animation: busy-spinner-anim 1s linear infinite;
animation: busy-spinner-anim 1s linear infinite;
}
Why this is not getting picked up.
I'm just starting to use the ngBusy directive and really like it, but my use case requires the ability to set any given element "busy", instead of setting one entire Angular component busy.
For instance, we have a stateful component that handles async activity - it contains a form and a table as child components. From within that parent component I'd like to apply the ngBusy directive to one child component:
<div class="parent">
<form class="user-form">
...
</form>
<table class="user-table" [ngBusy]="loadingPromise">
...
</table>
</div>
Or, as a more simple example - in the demo app, if you modify demo file table.component.html
to contain two identical tables (just for demo purposes, obviously not a great component name), would it be possible to just apply the ngBusy directive to one of the two tables?
<!-- original table, without busy -->
<table class="table">
<thead class="thead-default">
<tr>
<th>#</th>
<th>Name</th>
<th>Species</th>
<th>Occupation</th>
</tr>
</thead>
<tbody>
<tr>
...
</tr>
</tbody>
</table>
...
</table>
<!-- new second table, with busy -->
<table class="table" [ngBusy]="loading">
...
</table>
I get this error when I import BusyModule. Or this library only works on Angular 2.0.0?
"dependencies": {
"@angular/common": "^2.3.1",
"@angular/compiler": "^2.3.1",
"@angular/core": "^2.3.1",
"@angular/forms": "^2.3.1",
"@angular/http": "^2.3.1",
"@angular/platform-browser": "^2.3.1",
"@angular/platform-browser-dynamic": "^2.3.1",
"@angular/router": "^3.3.1",
"angular2-busy": "^1.0.2",
"angularfire2": "^2.0.0-beta.7",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"firebase": "^3.6.8",
"ng2-bootstrap": "^1.3.2",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"zone.js": "^0.7.2"
},
"devDependencies": {
"@angular/compiler-cli": "^2.3.1",
"@types/jasmine": "2.5.38",
"@types/node": "^6.0.42",
"angular-cli": "1.0.0-beta.26",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "~4.0.13",
"ts-node": "1.2.1",
"tslint": "^4.3.0",
"typescript": "~2.0.3"
}
Hello,
I really like the idea behind angular2-busy and I had a suggestion about extending its support to not only Promises but thenable
s in general.
There are some libraries out there, most notably jQuery, which does not support the Promises/A+ spec and as a result they won't work with angular2-busy right away. In a project I'm working on I had to wrap a thenable
in a proper Promise
just so I could get the loading indicator off the screen once the thenable
was fulfilled.
As far as I can see from the code this would not be a major change as the PromiseTrackerService
only uses the .then
method of the promise
if promise
is an instance of Promise
. Checking if the promise
object has a .then
method (in effect checking if it is a thenable
) would alleviate this "problem".
I would love to hear your thoughts on this.
Cheers,
Can
do you have any support for webpack?
In real angular APP, you do not use http observable directly, you want to use real data = TRUE/FALSE.
So if this should have been usable, you would have added support for TRUE/FALSE direct binding. :-(
[ngBusy]="booleanValue"
in normal production ready application, your components have never ever access to services, they have theirs INPUTs, like [loading]="value" and it is Boolean and it is taken from store (ngrx/redux anything).
From your services, you will just update boolean value in the store (for example with @ngrx/effects, or in normalne subscriptions).
Access services and subscriptions directly in your component is bad behavior and i think not to support it is your wish.
Hi,
My Project those not start when I add ngBusy directive to my template.
<div [ngBusy]="busy"></div>
` busy: Subscription;
ngOnInit()
{
this.busy = this.dataService.getSystems().subscribe((ut:UserTypes[]) =>{
this.userType = ut;
}, error => {
this.notificationService.printErrorMessage('Failed to load user types. ' + error)
})
}
`
I want to remove the animation for the component, how do I do that?
Thanks in advance :)
Error on fetch: node_modules/angular2-dynamic-component/index
I get this compile error when attempting to use angular2-busy. I checked and noticed that angular2-dynamic-component isn't even a dependency.
hi
I have this error when using with SystemJS.
But I'm' trying to figure out why ?
if you have any advice that would be great
thanks
This component is great, but it shouldn't be necessary to link to the stylesheet since Angular 2+ allows packaging css in a component using the styles
or styleUrls
properties of the @Component
decorator.
see:
Thank you for updating this , i started to and just got swamped with other work.
i pulled the updated package into an app yesterday and it seem to be playing well with Angular-cli now !
The demo is not working within Internet Explorer. Any ideas?
In Chrome this is working correctly.
Would it be out of scope to disable input buttons or forms within an element containing ngBusy? This would help prevent multiple form submissions while the observables or promises are being processed.
Appears so.
Getting the following error. Any help appreciated.
Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:60660/angular2-busy
Error: XHR error (404 Not Found) loading http://localhost:60660/angular2-busy
Error loading http://localhost:60660/angular2-busy as "angular2-busy" from http://localhost:60660/app/app.module.js
Tried to follow the guidelines from the documentation.
Package.json
....
"dependencies": {
//others
"angular2-busy": "1.0.2"
},
....
Systemjs.config.js
//....
System.config({
paths: {
'npm:': 'lib/npmlibs/'
},
map: {
app: 'app',
'rxjs': 'npm:rxjs',
// ...other libraries..
'ts-metadata-helper': 'npm:ts-metadata-helper',
'angular2-dynamic-component': 'npm:angular2-dynamic-component',
'angular2-busy': 'npm:angular2-busy'
},
packages: {
//....other...
'ts-metadata-helper': {
defaultExtension: 'js'
},
'angular2-dynamic-component': {
defaultExtension: 'js'
},
'angular2-busy': {
main: './index.js',
defaultExtension: 'js'
}
}
});
app.module.ts
...
import { BusyModule } from 'angular2-busy';
...
@NgModule({
imports: [
....
BusyModule
]
...
})
Contents of folder "lib\npmlibs\angular2-busy"
busy.component.js
busy.directive.js
busy.module.js
busy.service.js
busy-backdrop.component.js
busy-config.js
index.js
pormise-tracker.service.js
util.js
Hi.
Not sure if this has been fixed in recent versions (i have "angular2-busy": "^1.0.2", in my packages.json) but I'm finding this problem:
When the page has scroll and an action at the bottom of the page triggers my
<div [ngBusy]="{busy: busy}"></div>
, the spinner and transparent overlay don't occupy all of the page height. It occupies only the part of the page that users see before scrolling down.
Found a fix by changing position: absolute
to position: fixed
in my busy-loading.sass but the spinner does not stick in the same position during all stages of the loading.
Any tips?
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.