How to have and read an environment file after an angular application has been built

Question

I'm building an angular application. This angular application will be delivered to multiple clients with different needs and infrastructure. It will need several values (for example backend server, title, ...) that should be configurable by the customer when doing the installation of this.

In debug, I can totally imagine those values coming from the environnments/environments.ts file, but once built, the environment.prod.ts cannot be changed anymore and therefore might not be built.

How can I provide values(I guess either by some file or environment variables) to the angular application(and how can I read them)?

It has not been decided yet, but most probably the built files will be wrapped in an nginx docker image.

Orthopteran

Answer 1

Considering you want to first build your app, and then select a specific environment to deploy it, this tutorial may be of use to you. In summary you just have to follow 4 steps:

1. Add a JSON configuration file in the src folder
2. Update our angular/webpack configuration to include the file in our dist folder
3. Add a simple configuration service with a call to get our config data from our config file
4. Use APP_INITIALIZER to invoke the method retrieving our config data during the bootstrap process

If you follow those 4 steps, your configuration will be a JSON inside your dist folder (or whatever other outputPath you have in your angular.json file).

As for the docker part, you could add the config file directly inside the nginx container. Although I am guessing you would prefer to create a docker volume. So you not have to worry about copying the right config file for each client and instead just keep their specific config file in their servers.

Wilma

Answer 2

There are two types of configurations:

1. Compile-Time-Configuration
2. Runtime-Configuration

Maybe, the following article helps you to find the best fit for your project: https://juristr.com/blog/2018/01/ng-app-runtime-config/

Dallis