Compiling different files index.html in Angular using environment variables

Angular Aug 05, 2020

In the last month, I had the necessity of creating two files index.html to my project Angular, because in the production version I needed to use Google Analytics but in the environment of development, I wanted not to send data to my Analytics account.

Researching in the web, I found one beautiful solution for my situation, Angular have one file called angular.json where you can set how the framework compiles the project and, more specific, we have I property called "index" in the JSON file, so is a lot simple config different files index.html pass the environment that you want to build.

{
   ...
   "configurations": {
        "production": {
						...
            "index": {
                "input": "src/index.prod.html",
                "output": "index.html"
            }
						...
				},
				"staging": {
						...
            "index": {
                "input": "src/index.staging.html",
                "output": "index.html"
            }
						...
				}
	}
  ...
}

Is only this that you need to do ❤