Angular2: using environment variables in index.html

Question

Any ideas on how to use environment variables in a file index.html. I need to include .js scriptA if the environment is prod and script B if the environment is something else. Otherwise, I will need to manually modify the file index.htmlbefore deployment.

Answer 1

Look dynamically load external js script in Angular 2 or dynamically load inside JS JS to import js files dynamically. For example, based on your URL, you can specify the file name to import.

Other options would be to set all the values ​​in one file and determine which values ​​to use based on your URL, for example. eg

//prod values
foo = "bar";
//non-prod values
if (!prod) {
    foo = "tux";
}

The best solution for this situation would be to use the Continuous Integration tool (Gitlab, TeamCity or something else). When you upload files to a repository, such as github or something like that, the CI tool will get the files from your repository and copy prod with js files that contain values ​​for your prod environment. It can also test if you wrote tests for your application, in which case when the test fails, it will break and not copy files.

Hope this helps.