change angular env variables at runtime

Question

I would like to be able to change the url on which my angular will fetch ressources from the server at build time. I would to pass a parameter during the build to change the url value The reason behind is for deployment in different docker containers.

environment.docker.ts

export const environment = {
  ...
  url: "localhost:8080"
};

I would like to have something like : ng build --env docker --url:"localhost:9090" which will update the default value during build time.

Vincent J · Answer 1 · 2020-03-05T14:25:05.130

Create an environment file environment.prod.ts:

export const environment = {
  production: true,
  apiUrl: '$BACKEND_URL'
};

Run ng build --prod true.

Now before running, replace the variable in all the generated html files:

cd dist;
find . -type f -exec sed -i 's~\$BACKEND_URL~https://mybackend.domain.com~g' {} \;

You can then run this replacing command before a run, for example before running a docker container at runtime.

PS: you can only run the command once this it replaces the variable "in place", make a backup copy of dist if you need.

score -2 · Answer 2 · answered May 17 '18 at 14:24

-2

That's already handled by the CLI.

Let's say you have several environments :

environment.ts
environment.local.ts
environment.docker.ts
environment.prod.ts

All the files must export the same variable, with different values. This means you can change the url property, but you can't delete it.

Once you have those environments, open your angular-cli.json file. Under the environments property, add your environments :

"environments": {
  "local": "environments/environment.local.ts",
  "docker": "environments/environment.docker.ts",
  "prod": "environments/environment.prod.ts"
}

Now, you can build with the environment of your choice : the CLI will use the correct file.

$ ng build --env docker
$ ng build --env local
$ ng build --env prod

answered May 17 '18 at 14:24

With `ng build --env docker`, i would like to change the url value; I want something like `ng build --env docker --url:"localhost:9090"` which will update the default value; so that for different build with `docker` environment file, I can have different value for the url – edkeveked May 17 '18 at 14:27
So your application should have several docker containers, and each container is supposed to have several urls ? So if you have 4 containers and 4 urls per container, you would end up with 16 links ? – May 17 '18 at 14:28
Possibly! I want to fully customize the port on which the server could listen in the container. And on the same time, the default port could be already used by another service in the container. – edkeveked May 17 '18 at 14:33
You have several solutions : 1) let the user change the URL 2) get the URL from your backend 3) hard-code your URLS and switch between at runtime. Is one of them something you want to do ? – May 17 '18 at 14:34
(because I didn't say, but `ng build --env docker --url:"localhost:9090"` isn't possible) – May 17 '18 at 14:35
None of the solutions you mentioned correspond to what I want. Because the user has no idea about the url of the server. I know that ng build does not have that option now, that is why I am asking my question :) But does my question make sense to you ? – edkeveked May 17 '18 at 14:38
Then no, sorry, there's no solution for you (I mean, no that I know of, of course). The only one you have is updating your environment files before building. – May 17 '18 at 14:39

change angular env variables at runtime

2 Answers2