Gestión de Ambientes en Angular: Desarrollo vs Producción

Los desarrolladores o desarrolladoras del Core de Angular ya pensaron en todos los problemas típicos que ocurren cuando programas en front-end. Uno de ellos es la posibilidad de diferenciar entre ambientes de un mismo proyecto.

Ambientes de Desarrollo y Producción

En tu proyecto de Angular encontrarás una carpeta llamada environments y por defecto con dos archivos dentro:

• environments.ts
• environments.prod.ts

Ambos lucen de manera muy similar.

// environments.ts
// This file can be replaced during build by using the `fileReplacements` array.
// `ng build` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.

export const environment = {
  production: false
};

// environments.prod.ts
export const environment = {
  production: true
};

Presta atención a los comentarios en el archivo environments.ts, pues explican como Angular, cuando compila la aplicación, se reemplaza por el correspondiente dependiendo del ambiente.

Busca en el archivo angular.json la propiedad fileReplacements:

// angular.json
"fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.prod.ts"
  }
],

Como claramente indica, el archivo environment.ts será reemplazado por environment.prod.ts al compilar la aplicación en modo producción.

Compilando en Modo Desarrollo y Producción

Cuando haces un ng serve, la aplicación se compila en modo desarrollo por defecto. Esta configuración también puedes cambiarla en el angular.json:

// angular.json
"serve": {
  ...
  "defaultConfiguration": "development"
},

Es equivalente a hacer un ng serve --configuration development.

Mientras que cuando haces un ng serve --configuration production se compila en modo producción y utilizará las variables de entorno que le corresponda.

De esta manera puedes manejar N cantidad de ambientes, cada uno con sus propias variables de entorno y su propia configuración dependiendo la necesidad.

---

Contribución creada por: Kevin Fiorentino.