I have run ng build --prod and copied the contents of /dist folder inside webapps folder of a dynamic web project.
I then try to export this project as a .war file and deploy it on Liberty server. The challenge is, I have set API URLs inside environment.prod.ts.
So in case I need to change the API URL, I need to re-run ng build and copy contents of /dist and then export as .war.
I have tried setting the the API Base URL to window.location.origin since the base URL will be same for our Angular app and Microservices.
What we want is to instead make the API URL configurable from outside. For example, we have created the final .war file, but when we deploy it as a container on docker, we read some config file and set it as API URL.
Since you are using Liberty, you could create an endpoint using JAX-RS (tutorial on JAX-RS here) that reads in the base URL(s) you need from a file or environment variables (you can use standard Java APIs or something like MicroProfile Config) and return them as a response. Package this as part of your .war file.
Then, on startup, your Angular application can make a request to this endpoint (which you'll always know the location of since it'll be the same window.location the Angular application itself is coming from, just a different context-root and/or path.) That will give it the information it needs to work.
1) You can have json files for configuration and add those in assets folder and refer these files for apis from code, so you won't need to rebuild for these, simply replace the content file in assets and it will work out of the box.
2) You can also use dynamic imports, but in that case you will need to have customized build-pack, to address your file.
You can include the ng build, war file creation, and the deployment in the same Dockerfile and thus setup directly the API_URL before the ng build step. But that would make you rebuild a container each time you change the API_URL (which, as of my understanding, is what you are doing each time you redeploy your war).
So I am going to make some assumptions for this first solution.
From what you've said I assume that you are working on a microservices architecture. I will also assume that all your microservices are exposed via a single endpoint which is an API Gateway.
A possible solution would be to have a fixed endpoint exposed via your API Gateway which the Angular App will use to get the API_URL (for example: /api/url). This would solve all your problems as you can make that endpoint (/api/url) return whatever you want.
You can make it so that it returns an url that you get from some configuration store/microservice that you can easily modify at any given time.
The only con that I can see is that you'll depend on that url to make your app work. Which makes it a single point of failure. Though you can bypass this by using some fallback api in case the /api/url endpoint doesn't work.