Cómo crear un index.html por entorno en Angular

En un proyecto Angular, a veces es necesario tener diferentes archivos index.html dependiendo del entorno, por ejemplo es habitual incluir scripts, enlaces de librerías, css, entre otros dentro del index.html, aunque no es un práctica recomendada, ya que lo suyo es hacerlo en el angular.json, sigue siendo útil en muchos proyectos poder definir un archivo index.html diferente para cada entorno. Esto se puede lograr modificando el archivo angular.json para definir un index.html diferente.

Pasos para configurar el index.html por entorno

1. Crea los archivos index.html personalizados

Crea múltiples versiones del archivo index.html en la carpeta src/. Por ejemplo:

src/
│
├── index.html         (default)
├── index.prod.html    (para producción)
└── index.dev.html     (para desarrollo)

1. Edita el archivo angular.json

Abre tu archivo angular.json y localiza la sección projects.[tu-proyecto].architect.build. Ahí, debes definir el archivo index que se usará para cada entorno:

{
  "projects": {
    "tu-proyecto": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "index": "src/index.prod.html"
            },
            "development": {
              "index": "src/index.dev.html"
            }
          }
        }
      }
    }
  }
}

En el ejemplo anterior, hemos especificado que el archivo index.html para producción es index.prod.html, y para desarrollo es index.dev.html.

1. Construye el proyecto

Ahora puedes construir tu proyecto especificando el entorno deseado. Por ejemplo:

# Para desarrollo
ng build --configuration=development

# Para producción
ng build --configuration=production

Dependiendo de la configuración que uses, Angular utilizará el archivo index.html correspondiente.

Conclusión

Con estos simples pasos puedes configurar diferentes versiones del archivo index.html para distintos entornos en Angular, permitiendo así tener configuraciones específicas para cada caso de uso.