I need new version angular2-busy for Angular 5

[jerry7411]

i upgrade my angular to version 5.0.0 and angular2-busy can not be used anymore . I need new version angular2-busy for Angular 5 . Does anyone know how to solve it?

[diandsonc]

waiting for...

[mavm84]

i think that this library doesn't have support anymore. we have to migrate to another.

[kvn-stgl]

@mavm84 Any recommendations?

[brnhrdt]

I'm currently using this library with angular v5.0.0. Although there is a warning that angular2-busy requires another Angular version, it still works fine.

[rahul-winner]

any update on it? or should we move away from this library.

[shaolinshaosson]

I managed to get it to show it self by using: <div [ngBusy]="{busy: busyTimeline }"> instead of <div [ngBusy]="busyTimeline"> But it's not removed when subscriptions finishes. I Was able to remove it by simply settings: this.busyTimeline = false; but that ofc throws an error: error TS2322: Type 'false' is not assignable to type 'Subscription'. and wont build, so fixing that is beyond my expertise :( Any one got any ideas ?

@brnhrdt are you able to build with v 5.0.0? Have you tried angular 5.0.3? That's the version I'm having trouble with

[brnhrdt]

@shaolinshaosson I created simple working example with angular 5.0.3 here: https://github.com/brnhrdt/angular2-busy-test

<div [ngBusy]="busyTimeline"> should work fine, please post your code where you assign a Subscription/Promise to busyTimeline variable.

[sinegovsky-ivan]

@brnhrdt your example doesn't works with --prod flag

[shaolinshaosson]

@sinegovsky-ivan your right, check #86 and @Sky4CE's answer

[YaoHuangMark]

Why am i making the following mistake : "Can't bind to 'ngBusy' since it isn't a known property of 'div'"

[Sky4CE]

@SenMaGe , make sure you properly set it up. You need to import busy module in your main module:

imports: [
    BusyModule,

export factory config function:

export function busyConfigFactory() {
    return new BusyConfig({
        delay: 0,
        minDuration: 350
    });
}

and provide it:

providers: [
    { provide: BusyConfig, useFactory: busyConfigFactory },

[YaoHuangMark]

@Sky4CE I do like this , because I'm using version 5.0 , I see other people use it this way. It's my app.module

import { BusyModule } from 'angular2-busy';
@NgModule({
  imports: [BusyModule ]
})

It's my html

<div class="fullWidth pageBox " [ngBusy]="loading"></div>

It's my component

import { IBusyConfig , BUSY_CONFIG_DEFAULTS } from 'angular2-busy';
import { Subscription } from 'rxjs/Subscription';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
    busy: Subscription;
    login() {
    this.busy = this.loginService.login()
    }
}

Any Suggestions ?

[shaolinshaosson]

@SenMaGe you should name busy: Subscription after what you pass to [ngBusy]. So for you, rename busy: Subscription; to loading: Subscription or [ngBusy]="loading" to [ngBusy]="busy"

[YaoHuangMark]

@shaolinshaosson I think you mean that I should defined "loading" , but the problem is the system can't recognize "[ngBusy]" . I do what you say , it's still doesn't work .

Can't bind to 'ngBusy' since it isn't a known property of 'div'. ("<div class="fullWidth pageBox " [ERROR ->][ngBusy]="busy">

[shaolinshaosson]

Sounds weird, is your LoginComponent loaded into a submodule of App module? if so, import BusyModule there aswell/instead. Or try any of the "solutions" in https://github.com/devyumao/angular2-busy/issues/9

[YaoHuangMark]

@shaolinshaosson thanks a lot, I saw the right way to go . this is what he said , it's absolutely right !!!

I also ran into this problem. I've managed to get this working by importing BusyModule in the feature modules that need it, rather than in AppModule. This will mean that I'll be importing BusyModule multiple times, in different feature modules. I'm not sure if this will result in any negative consequences though.

you got it ?

[diandsonc]

@SenMaGe try

Component Module @NgModule({ imports: [ BusyModule.forRoot() ]

html <div [ngBusy]="{busy: [loadActions]}"></div>

component.ts

public loadActions: Subscription; this.loadActions = this._service.getAll().subscribe( result => {}, error => {}, () => {} );

If don't work try use "tixif-ngx-busy" is the same plugins compatible with angular 5.

[YaoHuangMark]

@diandsonc no no no , you can't do this . it's can not empty in "forRoot" parenthesis .

BusyModule.forRoot()

[diandsonc]

@SenMaGe set your busy config. I use

BusyModule.forRoot(busyConfig)

export const busyConfig: BusyConfig = {
    message: 'loading...',
    delay: 200,
    template: '<div id="loader-wrapper"><div id="loader"></div><div class="loader-section section-left"></div><div class="loader-section section-right"></div></div>',
    minDuration: BUSY_CONFIG_DEFAULTS.minDuration,
    backdrop: true,
    wrapperClass: BUSY_CONFIG_DEFAULTS.wrapperClass
};

[tiberiuzuld]

Hello, Made a angular 5 AOT --prod compatible version for angular-busy with option for custom template https://github.com/tiberiuzuld/angular-busy

[Arikael]

@tiberiuzuld There seems to be an issue with AoT in your version. Whenever I use it in a template, I get TypeError: Cannot read property 'isSkipSelf' of null

[tiberiuzuld]

Hi @Arikael , Can you please open an issue on https://github.com/tiberiuzuld/angular-busy with more details like: -config options -custom template or not? -angular version

I currently use it in 2 projects and have no problems.

Thanks

[Arikael]

I can't see the "issue" tab, that's why I posted it here :)

[tiberiuzuld]

Ups you can see it now.

[Arikael]

I have to investigate further because it behaves quite strange. It resides in a subdirectory (so there's a parent node_modules folder) and uses symlinks to link a library. After removing any reference in the parent's node_modules folder it currently seems to work (it sometimes fails to build)

I will open an issue if the problem can be traced to the package and the error persits.

But anyway: Thanks for updating the package!

[gravypower]

moved to ng-busy and it worked well with angular 5.2.0

[DOMZE]

@gravypower best lib for a close if not 1 to 1 port. @tiberiuzuld good job on the fork as well.

[ghillert]

Moving to ng-busy was super painless and works with Angular 5.2.x. Just a few imports changed.