skip to Main Content

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.

2

Answers


  1. 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/

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search