Documentation for BusyModule.forRoot with BusyConfig

[ipassynk]

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: [ ... ]
})

[skyfremen]

@ipassynk Are you able to share your solution?

[ArnaudWissart]

Hi, I am interested with this problem too.

Please, if you found a solution, tell us...

[seanfar]

@skyfremen @ArnaudWissart - the correct way to handle this as outlined above is to supply BusyConfig as a provider rather than performing a forRoot() call statically during the import.

One way to hack around this is to create a factory to provide a new BusyConfig and pass in the options you want to override into the constructor. For example, in your app module:

export function busyConfigFactory() {
  return new BusyConfig({
     minDuration: 1000,
     backdrop: true,
  });
}

And in your providers array you can provide BusyConfig using the function above:

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

Hope that helps.

edit - changed provider to use a factory rather than a static variable.

[genz10]

My solution

Create new ts file named "BusyConfig.extend.ts" on the same level directory of module located.

import {BusyConfig} from "angular2-busy";
export class BusyConfigExtend extends BusyConfig {
  backdrop = true;
//Your configuration
}

and then import your class on app.module.ts or any module you implement busy config.

import {BusyConfigExtend} from "./BusyConfig.extend";

and then on import statement it will be like this

imports: [ BusyModule.forRoot(new BusyConfigExtend) ],

my angular version:

    "@angular/animations": "^4.1.2",
    "@angular/common": "^4.1.2",
    "@angular/compiler": "^4.1.2",
    "@angular/compiler-cli": "^4.1.2",
    "@angular/core": "^4.1.2",
    "@angular/forms": "^4.1.2",
    "@angular/http": "^4.1.2",
    "@angular/platform-browser": "^4.1.2",
    "@angular/platform-browser-dynamic": "^4.1.2",
    "@angular/platform-server": "^4.1.2",
    "@angular/router": "^4.1.2",

angular cli version : @angular/cli: 1.0.3

Hope this helps!

[sahilkumar1012]

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'C:\kumars9-stmicroelectronics\SALES-AND-MARKETING\angularjs\git\ols-customer-portal\OLSAngularCli\src'
ERROR in Error: 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 getBusyConfig in C:/kumars9-stmicroelectronics/SALES-AND-MARKETING/angularjs/git/ols-customer-portal/OLSAngularCli/src/app/app.module.ts, resolving symbol AppModule in C:/kumars9-stmicroelectronics/SALES-AND-MARKETING/angularjs/git/ols-customer-portal/OLSAngularCli/src/app/app.module.ts, resolving symbol AppModule in C:/kumars9-stmicroelectronics/SALES-AND-MARKETING/angularjs/git/ols-customer-portal/OLSAngularCli/src/app/app.module.ts, resolving symbol AppModule in C:/kumars9-stmicroelectronics/SALES-AND-MARKETING/angularjs/git/ols-customer-portal/OLSAngularCli/src/app/app.module.ts
    at syntaxError (C:\kumars9-stmicroelectronics\SALES-AND-MARKETING\angularjs\git\ols-customer-portal\OLSAngularCli\node_modules\@angular\compiler\bundles\compiler.umd.js:1729:34)
    at simplifyInContext (C:\kumars9-stmicroelectronics\SALES-AND-MARKETING\angularjs\git\ols-customer-portal\OLSAngularCli\node_modules\@angular\compiler\bundles\compiler.umd.js:24979:23)

getting this error. how can i resolve it ?

[sacgrover]

Hey, I am able to fix it by below solution:

Create new file for config:

import { Inject, Component } from "@angular/core";
import { InstanceConfigHolderService, BusyConfig } from "ng-busy";

@component({
selector: 'default-busy',
template: <div class="ng-busy-default-wrapper"> <div class="ng-busy-default-sign" > <div style="float: left;"> <div class="spinner"></div> </div> <div class="ng-busy-default-text" style="margin-top: 10px;">{{message}}</div> </div> </div>,
})
export class CustomBusyComponent {
constructor(@Inject('instanceConfigHolder') private instanceConfigHolder: InstanceConfigHolderService) {
}

  get message() {
    return this.instanceConfigHolder.config.message;
  }

}

export class CustomOptionBusy extends BusyConfig {
template= CustomBusyComponent
templateNgStyle={}
constructor(){super()}
}

In appmodule

@NgModule({
declarations: [CustomBusyComponent],
imports: [NgBusyModule],
providers: [{provide: BusyConfig, useClass: CustomOptionBusy}],
entryComponents: [ CustomBusyComponent],
})
export class AppModule { }

I have tested this in Angular 7

Regards

[markorskip]

I tried three different solutions, only this one worked for me. Thanks so much for posting.