Creando Múltiples Environment.ts en Angular: Guía .env

Configuración de Angular para Diferentes Escenarios

Comienza con una reciente instalación de Angular.

Puedes evitarlo si ya lo tienes

ng new <nombreProyecto>

Dirígete al directorio del proyecto en la terminal

cd nombreProyecto

En la terminal, escribe este comando para crear archivos de ambiente estándar

ng generate environments

Ejemplos de archivos de ambiente generados

nombreProyecto/src/environments
ambiente.ts
ambiente.desarrollo.ts
ambiente.preproduccion.ts

Para la depuración, simplemente registra en la consola para verificar si se muestra el contenido del ambiente.

import { Component } from ‘@angular/core’;
import { ambiente } from ‘./../environments/ambiente’;

@Component({
  selector: ‘app-root’,
  templateUrl: ‘./app.component.html’,
  styleUrls: [‘./app.component.css’]
})

export class AppComponent {
constructor() {
  console.log(ambiente.production); // Registra false para ambiente de desarrollo
}
title = ‘aplicación de muestra!’;
}

Cambia el nombre de algunos de los archivos según las necesidades del proyecto. Por ejemplo, he modificado el nombre a

nombreProyecto/src/environments
ambiente.ts
ambiente.preproduccion.ts
ambiente.prod.ts

Creación de archivos .env

Crea un archivo .env que asignará los secretos por ambiente como en este ejemplo. Nombre del archivo: .env.prod

NOMBRE=”Prod simplificar.com”
NOMBRE_API=”http://simplificar.com”
ES_PRODUCCION=true
TOKEN_SECRETO='tokensecretoprod'

Excluye archivos en .gitignore

/src/environments/*
.env*

Configurar Angular.json

Dentro de angular.json, agrega reemplazoArchivo en las configuraciones de compilación y también la configuración de servicio como en este ejemplo.

"configuraciones": {
            "produccion": {
              "presupuestos": [
                {
                  "tipo": "inicial",
                  "advertenciaMaxima": "500kb",
                  "errorMaximo": "1mb"
                },
                {
                  "tipo": "estiloComponente",
                  "advertenciaMaxima": "2kb",
                  "errorMaximo": "4kb"
                }
              ],
              "reemplazoArchivos": [
                {
                  "reemplazar": "src/environments/ambiente.ts",
                  "con": "src/environments/ambiente.prod.ts"
                }
              ],
              "hasheadoSalida": "todo"
            },
            "preproduccion": {
              "reemplazoArchivos": [
                {
                  "reemplazar": "src/environments/ambiente.ts",
                  "con": "src/environments/ambiente.preproduccion.ts"
                }
              ],
              "hasheadoSalida": "todo"
            }
          }

Utilizando archivo Node JS para Generar Environment.ts para todas las Fases

(Opcional)
He elaborado un código para automatizar el mapeo de secretos de los archivos .env a ambientes

Primero crea un archivo llamado mynodejs.cjs y utiliza el siguiente código de mi gist. Siéntete libre de utilizarlo y modificarlo en tu archivo.

const fs = require('fs');
const path = require('path');
const successColor="\x1b[32m%s\x1b[0m";
const checkSign = '\u{2705}';
const listaAmbientes = ['local', 'preproduccion', 'prod'];

listaAmbientes.forEach(en => {
  const rutaAmbiente = en !== 'local' ? `.${en}` : '';

  const archivoAmbiente = `export const ambiente = {
    nombre: '${process.env.NOMBRE}',
    produccion: ${process.env.ES_PRODUCCION},
    urlApi: '${process.env.URL_API}',
    tokenSecreto: '${process.env.TOKEN_SECRETO}'
  };
`;

  const rutaDestino = path.join(__dirname, `../src/environments/ambiente${rutaAmbiente}.ts`);
  fs.writeFile(rutaDestino, archivoAmbiente, (err) => {
    if (err) {
      console.error(err);
      throw err;
    } else {
      console.log(successColor, `${checkSign} Archivo de ambiente ${en} generado exitosamente`);
    }
  });
});

Ejecutar en la terminal

node mynodejs.cjs

Salida (output)

export const ambiente = {
   nombre: 'Prod',
   produccion: true,
   urlApi: 'http://simplificar.com',
   tokenSecreto: 'tokensecretoprod'
 };

Conclusión

Utilizar .env y automatizar con Node JS es una manera conveniente de gestionar configuraciones en distintos ambientes. Aumenta la flexibilidad y agiliza el proceso de desarrollo para un flujo de trabajo más fluido.

Fuente

En Grupo MET podemos ayudarte a implementar esta y muchas mas herramienta para optimizar tu trabajo. ¡Contáctanos para saber más!

Contactanos