What is the process for manually altering environment variables in Angular post-build?

In order to avoid having to rebuild my app every time I need to deploy it on a different server with a different API address, I currently store the API base address in my environment class which gets included in the bundles after build. However, this makes it difficult to change the API address without rebuilding the entire app, which is quite time-consuming.

My app is large and time-consuming to build, so I am looking for a way to dynamically update the API address without having to go through the entire build process. Here's an example of how I currently have it set up in my environment.prod.ts file:

export const environment = {
  production: true,
  configName: 'prod',
  baseUrl: 'https://mpisitweb1/api'
};

Answer №1

If you're looking to enhance your application, consider creating an environment.json file within your assets folder and sharing it publicly. Upon starting your application, make a request to download this file from the same URL where your app is hosted. This file can contain important information such as the API baseUrl.

Since you cannot override environment variables in Angular, it's recommended to store this value in a separate location. One suggestion is to place it in a service that can be injected into the http Interceptor. This way, you can simply specify "{BASE_URL}" as your base point, allowing the interceptor to dynamically change it as required without affecting the rest of your application.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Fade in and out animation for flash notifications

Is there a way to create a flash message with a smooth fade in and out animation using jQuery? I would appreciate any recommendations on the most efficient approach for achieving this effect. ...

Two buttons next to each other positioned below my magnified picture

I'm currently working on implementing a feature where clicking an image enlarges it and displays two buttons at the bottom, but I'm facing some challenges with getting the buttons to show up. Any assistance would be greatly appreciated! Addition ...

Identifying a change in the source location of an iframe element

I am working with an iframe object that is currently set to a specific page's URL. Here is an example: <iframe src="http://en.wikipedia.org/wiki/Special:Random"></iframe> My goal is to display an alert whenever the location of the iframe ...

Problem with extJS portal functionality

Currently, I am utilizing this particular URL for my application: . I attempted to swap out the existing chart in the third column with a bar chart and a pie chart (both of which work fine within panels and windows), but I encountered an "h is undefined" e ...

Can someone explain the purpose of $event in Angular Material and whether it is necessary when using UI Router?

As I explore this unanswered question, I can't help but ponder if discovering the answer is truly important. My search for information on $event has led me through Angular Material and material docs, yet no mention of it exists. The only reference I f ...

How can multiple if loops for conditions be optimally rewritten in Vue/JS?

Within my Vue JS application, I have implemented code that changes the color of text based on a meter value. The code snippet looks like this: <span class="card__form__meter__warning" :class=" { weak : password_weak, 'very-weak' ...

Using Angular 5 to access a variable within a component while iterating through a loop

I am currently in the process of transferring code from an AngularJS component to an Angular 5 component. Within my code, I have stored an array of objects in a variable called productlist. In my previous controller, I initialized another empty array nam ...

Sharing a Directive across multiple AngularJS modules: Tips and Tricks

AngularJS has truly captured my interest with its powerful capabilities. I am delving deeper into the world of Angular and finding myself falling in love with it more each day. Despite my efforts, certain doubts continue to linger, leaving me eager for cla ...

Errors in syntax that were missed and errors in referencing that were missed

I've been struggling with this program for hours and now I'm encountering these errors. I have no idea what went wrong, any assistance would be greatly appreciated. Uncaught SyntaxError: Unexpected token { Uncaught ReferenceError: start is ...

Utilize jQuery to show a specific section of the page based on the hash in the URL

So, the inspiration for this project stemmed from a common issue I encountered: After hitting the register button, the PHP script processes it and displays an error, but the page remains on the login form. Here's the visual representation of the i ...

Transferring a JSON document to an Express server with JavaScript

I've recently started learning JavaScript and I'm facing an issue with sending a JSON file to my server (Express) so that I can parse its contents and use them in the web application I'm developing. Here's my current setup: a JSON fil ...

Leveraging jQuery or javascript to display json data in a table with multiple columns

My goal is to convert a JSON data into an HTML table that dynamically creates columns based on the content of the JSON. However, I am facing challenges in looping through the JSON and rendering multiple columns when necessary. The desired output for the e ...

When utilizing the "nofollow/sponsored" attribute, window.open will open in a new window as opposed to a new tab

When using a window.open link with the "nofollow" attribute, I expect it to open in a new tab. However, it opens in a new window instead. This code successfully opens in a new tab: $('.b_link').click(function (e) { e.preventDefau ...

Issue with ESRI-Leaflet not displaying in an Angular Typescript environment due to a failure to recognize vector data

I am facing an issue where I cannot display the map or utilize the search functionality provided by esri-leafleft. Below is the code snippet from the typescript file: import { Component, OnInit } from '@angular/core'; import { Title, Meta } from ...

Displaying interactive charts in a pop-up window using Highcharts within a Bootstrap

I am looking to display a highchart inside a popover. Check out my code in this jsfiddle http://jsfiddle.net/hfiddle/abpvnys5/47/. Here is the HTML: <ul class="stat_list" style="float: left;"> <a data-toggle="popover" data-trigger="hover ...

Is it possible to limit sections of a model that have been cut off using THREE.js?

Recently, I delved into the world of Three.js, only to encounter some challenges. I have been working with a 3D object where I utilized local clipping planes to shape it to a certain extent. However, due to the nature of 3D objects being "hollow", only th ...

Using NextJS's API routes to implement Spotify's authorization flow results in a CORS error

I am currently in the process of setting up the login flow within NextJS by referring to the guidelines provided in the Spotify SDK API Tutorial. This involves utilizing NextJS's api routes. To handle this, I've created two handlers: api/login.t ...

What is the process of finding a specific word within a string using jQuery?

Looking for a way to search for a specific word using jquery? Check out the code below: child_name = "Fasia_Cube.006"; if (child_name.toLowerCase().indexOf("fasia") >= 0){ alert("Found: fasia"); } The word "Fasia" can appear anywhere in the text. ...

The combination of Firebase Storage's listAll() method and getDownloadURL() function is not functioning properly

I created a function in my utils file that is designed to find and retrieve the URLs of images stored within a specific folder on Firebase Storage. The folder path is "proj_name/screenshots/uid/" and it contains 8 images. I have imported this function into ...

using an external JavaScript function in the MongoDB shell

In my case, I have JavaScript functions that are stored in a JSON file: functions={} functions.a = function(){ return "returned" } I've come across tutorials suggesting that by importing this JSON file, I should be able to use these ...