Store config in the environment (ENV)

[pahlers]

Which @angular/* package(s) are relevant/related to the feature request?

compiler

Description

Current solutions

We have several options to add configuration into a Angular application

1. use environment.ts and add the configuration during the build fase,
2. use /assets/config.json and fetch the configuration during the initialization of the application (which can go wrong, etc).
3. Maybe there is another solutions I'm not aware of.

All these solutions have a con and that is it can't change the configuration during deployment of the application.

Which is bad because its violates the guideline III. Config of The Twelve-Factor App.

The Twelve-Factor App (https://12factor.net/)

The twelve-factor app is a methodology for building software-as-a-service apps that:

• Use declarative formats for setup automation, to minimize time and cost for new developers joining the project;
• Have a clean contract with the underlying operating system, offering maximum portability between execution environments;
• Are suitable for deployment on modern cloud platforms, obviating the need for servers and systems administration;
• Minimize divergence between development and production, enabling continuous deployment for maximum agility;
• And can scale up without significant changes to tooling, architecture, or development practices.
  The twelve-factor methodology can be applied to apps written in any programming language, and which use any combination of backing services (database, queue, memory cache, etc).

As a developer we want to follow these guidelines so the app can be deployed in several ways on several systems.

III. Config - Store config in the environment

An app’s config is everything that is likely to vary between deploys (staging, production, developer environments, etc). This includes:

• Resource handles to the database, Memcached, and other backing services
• Credentials to external services such as Amazon S3 or Twitter
• Per-deploy values such as the canonical hostname for the deploy

Apps sometimes store config as constants in the code. This is a violation of twelve-factor, which requires strict separation of config from code. Config varies substantially across deploys, code does not.

As you can read the environment.ts solution violates this rule store config as constants in the code (but I like that the config is build into the application).

So why don't want I use the /assets/config.json solution? Because;

• Performance. Every time the application starts it needs to fetch the configuration file.
• Failure. Fetching the configuration file could be going wrong. So you need to implement a fail-over and an error-page to inform the user, etc.

Solution

I would like to see a solution which provides a way to add the configuration during the deployment of the server in the environment as the III. Config - Store config in the environment rule suggests.

Proposed solution

Inspired by the working of the Angular TransferState

1. The web server transfers the environments to the environment-element in the index.html during startup, and
2. During startup of the application the content of the environment-element is parsed an can be used as configuration.

During development a default configuration is used.

Alternatives considered

Always compile the environment.ts in a separated file, in a predictable format, so we can change the values during startup of the web server.

[JoostK]

This is (partially) being discussed in #28661, with the distinction that this issue approaches is from an SSR/SSG perspective.

[e-oz]

environment.ts can have functions, not only constants. It's just a TS file, use whatever you want there.

[alan-agius4]

This is essentially a duplicate of angular/angular#58433

When the configuration is fetched on the server side using HttpClient, it gets cached in the TransferState. As a result, the fetch will not be triggered on the client side.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}