Manejo de ambientes

¿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

Mas info de variables de entornos
https://parzibyte.me/blog/2019/11/25/variables-entorno-angular/

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 “build 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.

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

Esto en lo personal me ayudo respecto a los environments
https://stackoverflow.com/questions/74558182/angular-15-cli-does-not-create-environments-folder-when-creating-an-angular-proj

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

super interesante

Esta perfecto!