Angular 2 different configs for one project

Question

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

The question is: How to create custom configuration for each server. Option with
environment.{$server_name}.ts not good, because in my case count of servers can be huge.

UPDATE:

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!

What does the configuration contain, and what's running on each server? Is there a node instance, for example? — msanford, Jul 26 '17 at 15:01
You could have a pre-build step which generates `environment.ts` based on whatever. — , Jul 26 '17 at 16:47

Nico Van Belle · Accepted Answer · 2017-07-27T08:43:07.853

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)

Angular 2 different configs for one project

1 Answers1