How to replace index.html for different environments in Angular

There are multiple occasions when we need to replace the default index.html file during the build time. For example, when we inject a GTM code snippet in the index.html, and there are different IDs per environment.

Fortunately, there’s an option in Angular configuration to do that, but it’s not documented in Angular DOCS. There is a proposal though; I hope we will get it soon.

Let’s jump into how to do that.

Guide

Inside the configuration object, we can specify the index property and set the file we want to replace the default index.html.

For example, if we have an environment called production, we need to add the input property inside the configuration object of the production environment.

We can pass two types inside the index property, either string or an object with an input and output field. Let’s review both of them

string

Suppose our file is called “index.prod.html” and lives inside the src folder.