Loading a "configuration" in Angular2

Question

I'm converting an existing app into Angular 2, and the client-side code gets its config from an API on the server (things like telemetry setup and URLs to other APIs). I have some services that depend on the URLs returned by that API to build the requests for data. How do I get the URLs into that service?

My initial plan was to make a new "configuration" service that will handle getting the data. But then (I believe) whenever you wanted to access a configuration property, you would have to "subscribe" to it to get the values out (at least, that's what I'm doing with the other services). I'd also have to figure out how to chain the responses, so once the data from the configuration service is returned, the data from the actual service requested fires.

To get around, I could call the configuration service in the App's constructor (so it would load the data the application's startup) and dump the data into a singleton. But then I'd need to make sure that things depend on the configuration data don't access the properties before their loaded.

Any suggestions for an approach I should take?

Ken Smith · Accepted Answer · 2016-05-03 14:53:01Z

1

I've taken several different approaches.

Probably the simplest is to inject the configuration values into the page server-side, so that you can start off knowing them, without having to worry about calling external API's.

If that won't work for you, then you can dump the properties into a singleton as you suggest. But you'd need to put a global Promise into that singleton (like the ready field below), which you would resolve as soon as you had the values retrieved. And then before using any of those values, chain your call off of that global config, e.g., something like this:

config.ready.done(function() { 
    // Use config properties
});

edited May 3, 2016 at 14:53

answered Dec 9, 2015 at 0:13

Ken Smith

20.5k17 gold badges105 silver badges151 bronze badges

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

2 Comments

Snorre Over a year ago

A good answer to a very valid question. I have strugled with the same problems for a while, and realize now that making a configuration service is not how the angular team intended configuration to be handled. But do you have a suggestion how to handle things like service url, and different enviroments? Is there a gulp task that can do replacements during build?

Ken Smith Over a year ago

@Snorre - Not a bad idea, if you're using node/gulp as part of your toolset. See, for instance, this gulp task: github.com/outaTiME/gulp-replace-task.

Collectives™ on Stack Overflow

Loading a "configuration" in Angular2

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related