Changing the environment variable in an Angular application with user input

Question

Changing the environment variable in an Angular application with user input

I'm currently in the process of developing an angular application that interacts with a REST API on the backend server. The URL for this server is currently set as an environment variable like so:

export const environment = {
  production: false,
  loggerLevel: NgxLoggerLevel.DEBUG,
  disableConsoleLogging: false,
  lang: 'en',
  api: {
    . //other variables
    .
    .
    host: "http://mycoolurl.com/rest/v11_1/",
    . 
    . //more variables
    .
  }
};

A similar question addressing this issue can be found here. However, it involves using a specific settings.json file fetched via APP INITIALIZER. Another related query can be viewed here, recommending the use of a separate JSON file.

A recent change request now demands that users have the ability to specify the target URL for the REST calls. Ideally, this should be facilitated through an input field where users can enter the desired URL, updating the host in the environment file accordingly. So, how do I go about achieving this?

Regrettably, completely revamping the implementation and removing the host from the environment file is not feasible, considering its widespread usage across the application.

angular typescript

Answer 1

Answer №1

If you attempt to directly modify the environment value within the code, you will run into issues as it is closely intertwined with other components. This method is not recommended because any updates to the application would simply overwrite the value. It is advisable to store the environment separately on the server side!

Approach A:

To change the environment value, utilize the APP_INITIALIZER and update it after loading:

environment.api.host = loadedValue

This tactic will work effectively only if you do not access the value prior to this alteration. The value may be accessed before this point if referenced in module definitions, configurations, or classes injected into the initializer.

Approach B

While a bit cumbersome, this method can also be effective:

Store the API URL in a separate JavaScript file structured similarly to this:

window.userEnvironment = { host: "http://custom-host" };

Include this JavaScript file in the <head> section of the index.html using:

<script src="user-env.js"></script>

. This ensures that it is loaded prior to Angular's initialization by the browser itself.

Subsequently, inside the environment.ts file, you can execute the following:

export const environment = {
  ...
};

const userEnv = (window as any).userEnvironment;
if (userEnv) Object.assign(environment, userEnv);

By implementing this code snippet, you effectively replace the environment values with those from the user-env.js file.

This operation does not necessarily have to take place within the environment file; it could be executed elsewhere. Just ensure that it transpires before the utilization of environment. Additionally, if multiple environments are being utilized, this process must be replicated across all corresponding environment files.

Answer 2

If you attempt to directly modify the environment value within the code, you will run into issues as it is closely intertwined with other components. This method is not recommended because any updates to the application would simply overwrite the value. It is advisable to store the environment separately on the server side!

Approach A:

To change the environment value, utilize the APP_INITIALIZER and update it after loading:

environment.api.host = loadedValue

This tactic will work effectively only if you do not access the value prior to this alteration. The value may be accessed before this point if referenced in module definitions, configurations, or classes injected into the initializer.

Approach B

While a bit cumbersome, this method can also be effective:

Store the API URL in a separate JavaScript file structured similarly to this:

window.userEnvironment = { host: "http://custom-host" };

Include this JavaScript file in the <head> section of the index.html using:

<script src="user-env.js"></script>

. This ensures that it is loaded prior to Angular's initialization by the browser itself.

Subsequently, inside the environment.ts file, you can execute the following:

export const environment = {
  ...
};

const userEnv = (window as any).userEnvironment;
if (userEnv) Object.assign(environment, userEnv);

By implementing this code snippet, you effectively replace the environment values with those from the user-env.js file.

This operation does not necessarily have to take place within the environment file; it could be executed elsewhere. Just ensure that it transpires before the utilization of environment. Additionally, if multiple environments are being utilized, this process must be replicated across all corresponding environment files.

Changing the environment variable in an Angular application with user input

Answer №1

Similar questions

What is the best way to turn off the annoying pop-up messages that show up for input validation, specifically the one that says "Please complete

Converting a TypeScript array into a generic array of a specific class

Encountered an error while trying to install @material-ui/core through npm: Received an unexpected end of JSON input

Verifying a data field in a document in Cloud Firestore for a particular value

ERROR : The value was modified after it had already been checked for changes

Kendo's comboBox for local virtualization

How can I reload a form page in Angular 9 after making a POST request with HttpClient?

Creating TypeScript Classes - Defining a Collection of Objects as a Class Property

Page Breaks - Patience in anticipation of dataSource readiness

Methods to validate CSS attributes specified within a class using React testing library

After making a change to a Vue or JavaScript file, running `npm run watch` causes a crash due to the `compileTemplate` function now requiring

The query parameters and URL are failing to update properly

How can I retrieve user group information from Keycloak in my Angular application?

Unable to bring in a TypeScript library that was downloaded from a GitHub fork repository

Warning from Google Chrome: Ensure password forms include optional hidden username fields for improved accessibility

After saving any HTML, SCSS, or TS file, Angular 12 does not compile immediately

Extracting data from an array using Angular

Display an API generated popup list using Vue's rendering capabilities

Encountered an issue while attempting to authenticate CMS signature using pkijs

Displaying a collection of nested objects in AngularRendering a group