1

I am loading config data from asp.net web api using http at the startup using APP_initializer .I am inspired by this stackoverflow thread Angular2 load configuration from backend on startup and this

My app.module.ts

providers: [
            HttpClient,
            {
                provide: APP_INITIALIZER,
                useFactory: (appConfigSvc:AppConfigService) => () => {
                    appConfigSvc.load();
                },
                deps: [AppConfigService],
                multi: true
            }, AppConfigService

The appConfig.Service.ts

@Injectable()
export class AppConfigService {
    private serviceApiUrl = "api/AppConfigApi/";
    public applicationConfig: Appconfigmodel.IAppConfigModel;


    constructor(private _http: Http) {     
    }

    getApiConfig(): Appconfigmodel.IAppConfigModel {

        return this.applicationConfig;
    }

    load() { this.getApplicationConfig(); }



    getApplicationConfig(): Observable<Appconfigmodel.IAppConfigModel> {

        let headers = new Headers({ 'Content-Type': 'application/json' });

        let options = new RequestOptions({
            headers: headers
        });

                //pulling config data from web.config of a ASP.Net Web API2

        return this._http.get(this.serviceApiUrl + 'GetApplicationConfig', options)
            .map((response: Response) => <Appconfigmodel.IAppConfigModel>response.json())
            .do(data => console.log('All: ' + JSON.stringify(data)))
            .catch(this.handleError);
    }

Then use it in any component like this:

export class FirstComponent {

constructor(private _appConfigService: AppConfigService) {

    }

    ngOnInit() {
      this.applicationConfig= this._appConfigService.getApiConfig();      // The config dat is getting as  undefined
    }

//button click
clickButton()
{
this.applicationConfig= this._appConfigService.getApiConfig();  // The  config data is populated here
}

}

The issue is, I am not able to access the config data in ngOninit of any components. But it is accessible inside button click event handler or similar methods which usually gets called a while after the application started.

Appreciate any help. Thanks.

1
  • Any help on this , please
    – Jaleel
    Jan 24, 2017 at 5:18

2 Answers 2

0

constructor(private _appConfigService: AppConfigService) { the constructor variable here should be public to access it.

if your going to use angular2 from my experience it's best to use the ng tools. Angular-cli

npm install angular-cli -g read the readme on these tools. I wouldn't build my front end with microsoft junk, even though I have been a softy for over 20 years.

0

If is it not working when ngOnInit() is called but works for the click event try using ngAfterViewInit(). I recon that should work. https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

1
  • Thanks for the reply. What if I want to use some config data on ngOnInit, say, I want get a REST API url from config , which I then use to fetch data to fill the component's html.
    – Jaleel
    Jan 19, 2017 at 4:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.