How to build once and deployed multiple environments using angular-cli 4?

Question

We planned to deploy angular into amazon S3 static website, currently we are doing separate build for each environments(development/production). Is any solution to build onc

Answer 1

As I understand you right you want to have one build (e.g. a continuous integration build) for several stacks (develop, test, production and so on). If you have different settings in your environment file for each stack you will have different builds. You have only one option to achieve that with only one build.

In your develop environment file keep your developing settings, which you need for developing locally. In your production environment file use Placeholders for the settings, which are different to your developing settings.

Then you can always build your application for production and you will have your application with the Placeholders compiled inside the main.*.bundle.js.

For Deployment you have to manipulate the main.*.bundle.js file (there are the Placeholders):

1. Pre-Deploy: run a script which manipulates the main.*.bundle.js to set the e.g. production settings.
2. Deploy: Deploy the application to your App Service
3. Post-Deploy: run a script which manipulates the main.*.bundle.js to set the placeholders again

Yes that isn't a nice solution, but after 3 days of researching this is the best option. You can then deploy your application for several stacks with running the scripts.

I did this with powershell scripts on Visuals Studio Team Services to use the release functionality there to deploy the application to Microsoft Azure.