Provide a Way to Use Runtime Environment Variables

[tim273]

Currently angular-cli has the environment option, which works great for setting environment variables at build time, but I have a requirement to use environment variables at run time. So I am sent a header from an Apache server called 'X-Environment' which contains 'dev', 'qa', 'prod', etc, and then at I use that to determine which environment variables to use. The reasoning for this is that the build team at my work wants a single deployable file (what's in the dist folder zipped up) that is built once and and deployed to multiple environments. They also want to control environment properties as much as possible using CMDB and minimize having hard coded environment variables.

All the searching I've done provides solutions about setting environment variables at build time, but none at run time. It would be nice something were built in angular-cli to make this happen, rather than having to do it manually.

[AnnieCypcar]

+1

"ng eject" is available to run the server with webpack config, but the documentation for it is minimal.

[mattdistefano]

TBH I don't think is a CLI issue, because the CLI isn't a runtime tool. I would really look at refactoring your configuration to move those runtime variables out of the environment file and into something that can be set dynamically. Most likely you will need some server-side assist to do that since I don't think your angular app would have access to the request headers anyway. So for example you can have your web server inspect the header and set some global variables for the appropriate environment, then reference those variables in your angular app rather than using the environment files.

[tim273]

What I mentioned above is doable because there are two other Angular 2 projects at my work doing it (using a header). They also had to set it up manually, but I can confirm it's working. Those projects used one of the angular-seed projects rather than angular-cli, so they use System.js and gulp, but I about to port over what they did to my project, which uses angular-cli.

[mattdistefano]

I'd be surprised if they're doing it entirely from the angular client-side code. Most likely the page that is loading the angular app contains server-side logic to inspect the header and vary some parameter in the rendered output.

[martinmcwhorter]

The safest runtime solution is to call http.get('/config.json') at startup.

[filipesilva]

Well yeah, it's doable but you have to do it yourself. There's plenty of ways of getting config files at runtime. We added a build-time feature because that you couldn't code into your application.

@martinmcwhorter's suggestion is pretty simple and to the point.

Also related #3855 (comment)

[jared-christensen]

This article has a pretty good example of setting up a runtime solution for anyone stuck on this like I was. https://juristr.com/blog/2018/01/ng-app-runtime-config/

[alexpercsi]

For a framework that is very opinionated about pretty much everything, I'm surprised that there is no "Angular way" of doing this. I agree that this is probably not an angular-cli issue, but hitting a web server to load the config files at runtime feels hacky.

[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.}