Api URL config in angular5, angular-cli in CI/CD setup

Question

I'm trying to build a good CI/CD solution with an angular client and rest api. I want to have a "build once, deploy many" setup of my angular client. Mostly angular-cli is wonderfull for this, but what I cant find a good solution for is storing the api url somewhere that I can manipulate during deploy.

The scenarios I have tried:

1) Storing the url in environment.env.ts files. The problem with this approach is that the environment.ts file is built into the artifacts of the "ng build" step, so I cannot alter the url during deploy. I could store all source as artifacts of the build step, and then do "ng build"/bundle during deploy, but this makes for a very slow deploy step, and I wouldn't really be deploying the same artifacts to several environments.

2) Storing the url in a separate assets/settings.json file. The problem with this is that getting the settings.json requires an async http.get call, and I cant find a good way to ensure that I have received the url before I can call the rest api.

Anyone have a good solution to either of these problems? Or a better approach altogether?

I found some github issues regarding this. github.com/angular/angular-cli/issues/… gist.github.com/fernandohu/122e88c3bcd210bbe41c608c36306db9 — Snorre
– Snorre, Commented Nov 23, 2017 at 11:30
I found this plunker which led me to a solution to alternative 2. I think angular-cli should handle configs better though. plnkr.co/edit/o7GohlMJ5nxgJtMEgKEP?p=preview — Snorre
– Snorre, Commented Nov 23, 2017 at 14:28

Gerlando Caldara · Accepted Answer · 2017-11-23 11:23:51Z

1

As idea you can place the env settings already into the env files. On build choose correct env over command parameters from your ci/cd setup.

ng build --env=prod

See detail insight here: Link

As alternative you can create a second git repo to hold env configuration files and replace them before the build starts on ci/cd process.

answered Nov 23, 2017 at 11:23

Gerlando Caldara

3231 gold badge3 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Snorre Over a year ago

I don't know if I understand you right, but I don't want the url to be bundled with the --env=prod, because my build server will have to change it if I deploy the artifacts to whatever environment.

Gerlando Caldara Over a year ago

Normal you know the target env on dev of the web app. So you can configure the different env setting on the enviroments. So you could rebuild the code for every target env before transmit to target system. So your normal build will only build and run tests, but will create an artifact with source code for the rebuild later. If you want change the env after build that would be tricky, as example you need to parse and replace main.bundle.js enviroment javascript code directly. I do not recommend this, because outside of standard.

Collectives™ on Stack Overflow

Api URL config in angular5, angular-cli in CI/CD setup

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related