No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

脷ltima oportunidad para asegurar tu aprendizaje por 1 a帽o a precio especial

Antes: $249

Currency
$189/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

0D
0H
2M
38S

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 18

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

驴D贸nde est谩n mis environments?

Si, como yo, vienes del futuro donde existe Angular 15 y superiores, debes saber que el equipo de Angular ha hecho una labor de minimizar los archivos necesarios para crear una aplicaci贸n, por lo que varios archivos han desaparecido. Debido a esto, es posible que no encuentres el directorio environments que utiliza Nico en esta clase. Pero no te preocupes, a煤n puedes usarlo.
Para usar los ambientes lo que tendr谩s que hacer es agregarlos manualmente, lo que es bastante sencillo, te muestro c贸mo.

Creando tus ambientes

  1. Primero necesitas ubicarte en el directorio src de tu aplicaci贸n.
  2. Estando en src vas a crear un directorio nuevo llamado environments.
  3. En este nuevo directorio, vas a crear tus ambientes. Inicialmente se utilizan dos: desarrollo y producci贸n. Como el de desarrollo es el ambiente por defecto, puedes nombrarlo environment.ts. Por su parte, al ambiente de producci贸n lo llamar谩s environment.prod.ts.
  4. Puedes crear m谩s ambientes si lo necesitas, por ejemplo, puedes tener un ambiente staging y lo nombrar铆as environment.staging.ts.
  5. Una vez creados, lo importante es la configuraci贸n que les des. La configuraci贸n m谩s b谩sica es tal que as铆:
export const environment = {
  production: false
};

Esta te puede servir para tu ambiente de desarrollo (environment.ts). Para tener un ambiente de producci贸n (environment.prod.ts), solo hace falta cambiar la propiedad production a true. As铆:

export const environment = {
  production: true
};
  1. A partir de aqu铆 puedes agregar todas las configuraci贸n y variables que gustes, tal como muestra Nico.
  2. Por 煤ltimo, es importante notar que para que Angular sepa que quieres hacer un build con una determinada configuraci贸n, se lo debes indicar. Por ejemplo, para hacer un build para producci贸n usar铆amos:
ng build --prod

Y eso es todo, espero que les sirva este peque帽o aporte 馃榿.

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

todo es cuesti贸n de gustos.. pero angular me gusta m谩s que react

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.

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鈥

Para Angular 15, el ambiente por defecto se cambi贸 a producci贸n, lo que significa que el build se genera directamente para productivo, por lo que se deben realizar alguna configuraci贸n adicionales para que se tomen los respectivos archivos environment para cada ambiente.

Por defecto el archivo de producci贸n se llamar铆a environment.ts, mientras que el de desarrollo podr铆a llamarse environment.dev.ts, lo importante viene cuando se realiza la configuraci贸n en el archivo angular.json donde se especifica, para cada ambiente, como se comporta el reemplazo de los respectivos archivos.

Por ejemplo, para el ambiente de desarrollo quedar铆a de la siguiente manera:

"development": {
	...
	"fileReplacements": [{
		"replace": "src/environments/environment.ts",
		"with": "src/environments/environment.dev.ts"
	}]
	...
}

Mientras que para la configuraci贸n de productivo no hay necesidad de configurar nada adicional, ya que su archivo environment.ts se toma por defecto.

Adjunto un art铆culo que ampl铆a la informaci贸n relacionada Angular 15: what happened to environment.ts

Tambi茅n adjunto otro art铆culo donde se ejemplifica una forma de manejar los datos que var铆an entre ambientes al momento de ejecuci贸n y no de compilaci贸n, como se hace con lo environments nativos de Angular: Runtime environment configuration with Angular

con ng generate environments se crea la carpeta environments con los archivos necesarios para los ambientes, solo tocar铆a poner production: true o production: false seg煤n se necesite y renombrar los archivos tambi茅n si se quiere
https://angular.io/guide/build

Mucho茅nfasis en que solo funciona en desarrollo ya que nosotros desplegando nuestras apps no entendiamos porque no funcionaban jaja, hasta que vimos que era un problema de API Gateway de AWS

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.

En Angular 16^ se puede crear la carpeta de **environments** desde el CLI, m谩s detalles aqu铆 ==> <https://angular.io/guide/build>

IMPORTANTE: Por ningun motivo se deberia incluir una API_KEY dentro de uno de estos archivos environment. Cualquier persona podria ver los detalles de la peticion en el navegador y asi averiguar su valor. Lo mas aconsejable seria tener un proxy server que reciba el request y luego ejecute la llamada a la API usando la clave desde el lado del backend

RECUERDEN:
El proxi no corre en Producci贸n, solo en Desarrollo.

super interesante

Esta perfecto!