Angular2- Loading config data at the app startup

Question

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.

Any help on this , please

Jaleel
– Jaleel

2017-01-24 05:18:42 +00:00
Commented Jan 24, 2017 at 5:18 — Jaleel
– Jaleel, Commented Jan 24, 2017 at 5:18

Mordagel · Accepted Answer · 2017-01-18 17:13:52Z

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.

answered Jan 18, 2017 at 17:13

Mordagel

3012 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rtn · Accepted Answer · 2017-01-18 17:16:56Z

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

answered Jan 18, 2017 at 17:16

rtn

2,0344 gold badges21 silver badges39 bronze badges

1 Comment

Jaleel Over a year ago

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.

Collectives™ on Stack Overflow

Angular2- Loading config data at the app startup

My app.module.ts

The appConfig.Service.ts

Then use it in any component like this:

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

My app.module.ts

The appConfig.Service.ts

Then use it in any component like this:

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related