No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Manejo de ambientes

12/23
Recursos

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.

Aportes 10

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Recuerda que un PROXY creado en angular no corre en PRODUCCION solo en el ambiente de desarrollo

Para que Angular sepa que estas en un ambiente de producción, debes compilar el proyecto con el comando:

ng build --prod

Si solo utilizas ng build, las variables de entorno no serán tomadas en cuenta.

Me ha gustado la forma en que Angular ha pensado en todas estas soluciones a problemas comunes de desarrollo.

todo es cuestión de gustos.. pero angular me gusta más que react

Nota importante
Estas variables no serán tomadas en cuenta si solo haces un ng build; debes hacer un ng build --prod para crear un “build de producción”

super interesante

En las reglas del proxy para hacer peticiones a una API con restricciones de Cors si quiero trabajar desde local con el proxy solo debería colocar target: http//localhost y el puerto en el que trabajaré
¿?. Agradezco la respuesta compañeros 😄

Muy buena clase.

Esta perfecto!