Yaroslav Draga Yaroslav Draga - 2 years ago 104
Javascript Question

Angular 2 different configs for one project

I have one Angular 2 project with some configuration files for access to microservices. This project deploying and building automatically by Jenkins to different servers. That proccess could be showed like this enter image description here

The question is: How to create custom configuration for each server. Option with

not good, because in my case count of servers can be huge.


Configuration file containe microservice url, example:

export const MSConfigAPI = {
protocol: 'http',
baseUrl: 'some-url',
version: 'v1',
port: '8082',
clientId: 'api_user',
clientSecret: 'pass',
getUrl: () => {
return MSConfigAPI.protocol + '://' + MSConfigAPI.baseUrl + ':' + MSConfigAPI.port + '/' + MSConfigAPI.version + '/';

Also i could have other configuration files that needes only for particular server.

My appication is CMS, so i want to have one source code, but for each project i want to change local configuration files.

On each server placed result of
ng build --prod --aot
, so plain css, js and other content.

Thanks for your answers!

Answer Source

You might want to consider exposing a web service on each server with all the configuration properties for your application. Then you can use the APP_INITIALIZER to call the web service on startup and store these configuration properties.

The biggest benefit of this is that you only need 1 build for all different environments. Also, changing configuration can be done without rebuilding the project.

Check this Plunker example of how to use it.

Edit: You might also want to check this SO topic if you find that this method fits your needs. (Just be wary of some older examples using Angular RCs instead of the final version)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download