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 鈥渂uild 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!