Angular - Production environment variables during deployment

Question

As per angular documentation, I understand that the production keys can be places in the "environment.prod.ts". However, what is not very clear to me is when during the build stage are:

1. Does the variables being included in the final build? If yes, wouldn't this make the env variables exposed to the public which were supposed to be a secret?

2. If the variables included in the build, what is the correct way to deploy a production version of the application? (Let's say the app will be hosted on firebase)

Thank you :)

Answer 1

For First question: If you have something critical you have to add it in your backend not frontend, for example most of secret keys should be there.

For seconds question: Usually I do this

In environment.prod.ts instead of real values I put place holders, for example

{
   api_url: '#!api_url!#'
}

So it will be build by this values, and in the time of deployment, I replace these place holders with actual values, in the main*.js file.

If you have automated the deployment, there are some tasks in Azure Devops and Octapus for that, for sure Jenkins should have something too.

By doing this also you will be able to deploy the same package to different environment, because replacing token with values happens before each deployment

The other reason to have place holders is you don't keep them in source control, and for example no body in dev team will have access to prod configs, and it goes in the hands of devops engineers