Ability to change environment.ts variables post-build

[kayvanbree]

Was told to post this here instead of the angular/angular repository. I don't know if this would be the best solution to my problem, this is a suggestion to my problem. If there are better solutions I'm open for everything right now.

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [x] feature request

Command (mark with an x)

- [ ] new
- [x] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Current behavior

You cannot edit settings after the Angular build is done. To be able to deploy the same Angular build to different environments, you need to hack your way to a workable solution.

Desired functionality

Environment.ts (or environment.prod.ts) should not be included in the build but rather be a separate file, like polyfills and the css file. This way you should be able to run your site in a different subdirectory, use another API, use another license, etc. Environment.ts should just be a file in your dist folder that you can change after the build was made.

What is the motivation / use case for changing the behavior?

Currently, it is not possible to configure Angular after the build is done. Environment variables don't do anything because Angular's code is not running on the server, or a Docker container. It's running in the client's browser. This gives a lot of problems for people trying to run Angular in different environments.

Examples

Running in a subdirectory

At the moment, I'm trying to run the same Angular application on a server on http://somedomain.com/ and http://somedomain.com/subdirectory. Currently, that's impossible to do without hacking something together. At the moment we have 2 environments, but our application needs to be deployed on several servers for several customers. I know this is not a niche problem, as there is tons of Google results on this subject.

I just found a 'solution' that's not going to work: https://juristr.com/blog/2018/01/ng-app-runtime-config/. This would work for any other setting, but I want to change the base href. I can't do a http-get call when I don't know where to call to yet.

Licenses

Some software vendors (like Wijmo) require you to get a license key for every domain you use. Currently, you'd have to rebuild for every domain.

Different API's

Sometimes you need a different API url for every environment. A co-worker solved this by re-routing /myapi to http://myapi.com/api/ in his nginx installation. I don't like this way as I want to be able to just docker-compose up my containers and have it work out of the box with some environment settings for a proxy container.

[clydin]

Duplicate of #7506

That issue has a lengthy discussion with suggested implementation options.

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