Creando Múltiples Environment.ts en Angular con .env

Configuración de Angular para Múltiples Entornos

Empieza con una nueva instalación de Angular.

Puedes omitirla si ya tienes

ng new <projectName>

Navega dentro del directorio del proyecto en el terminal

cd projectName

En el terminal, escribe este comando para generar archivos de entorno por defecto

ng generate environments

Ejemplos de archivos de entorno generados

projectName/src/environments
environment.ts
environment.development.ts
environment.staging.ts

Para la depuración, simple registro de la consola para comprobar si se ve el contenido del environment content.

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

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

export class AppComponent {
constructor() {
  console.log(environment.production); // Logs false for development environment
}
title = ‘sample app!’;
}

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

projectName/src/environments
environment.ts
environment.staging.ts
environment.prod.ts

Crear archivos .env

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

NAME=”Prod simplifyjs.com”
API_NAME=”http://simplifyjs.com”
IS_PRODUCTION=true
SECRET_TOKEN='prodsecrettoken'

Excluir archivos en .gitignore

/src/environments/*
.env*

Configurar Angular.json

Dentro de angular.json, añade fileReplacement en las configuraciones de compilación y también la configuración de servicio como en este ejemplo.

"configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "staging": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.staging.ts"
                }
              ],
              "outputHashing": "all"
            }
          }

Usando archivo Node JS para Generar Environment.ts para todas las Etapas

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

Primero cree un archivo llamado mynodejs.cjs y use el siguiente código de mi gist. Siéntete libre de usarlo 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 envList = ['local', 'staging', 'prod'];

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

  const envFile = `export const environment = {
    name: '${process.env.NAME}',
    production: ${process.env.IS_PRODUCTION},
    apiUrl: '${process.env.API_URL}',
    secretToken: '${process.env.SECRET_TOKEN}'
  };
`;

  const targetPath = path.join(__dirname, `../src/environments/environment${envPath}.ts`);
  fs.writeFile(targetPath, envFile, (err) => {
    if (err) {
      console.error(err);
      throw err;
    } else {
      console.log(successColor, `${checkSign} Successfully generated ${en} environment file`);
    }
  });
});

Ejecutar en el terminal

node mynodejs.cjs

Salida (output)

export const environment = {
   name: 'Prod',
   production: true,
   apiUrl: 'http://simplifyjs.com',
   secretToken: 'prodsecrettoken'
 };

Conclusión

Usar .env y automatizar con Node JS es una forma práctica de manejar configuraciones en diferentes entornos. Aumenta la flexibilidad y agiliza el proceso de desarrollo para un flujo de trabajo más fluido.

Fuente