Una de las cosas que me he encontrado últimamente en el trabajo es la necesidad de configurar mi aplicación de angular con diferentes parámetros para agilizar la distribución de una aplicación. Cuando trabajas con el backend es muy sencillo acceder a process.env para obtener claves secretas y configuraciones sensibles que no deben mostrarse en el código, esto no sucede con angular. Angular se compila y su código se ejecuta en el navegador de manera que, aunque utilicemos un servidor montado en nodeJS, no prodremos acceder a proces.env. ¿Como solucionar este problema?
Siguiendo este tutorial que describe como crear una aplicación fácilmente configurable sin necesidad de compilar podremos lograr nuestro primer objetivo.
Empezamos creando un nuevo fichero que nombraremos env.js.
Debe guardarse a la misma altura que nuestro index.html
Llamamos este fichero desde nuestro head en el html
Nos aseguramos que angular adjunte nuestro script al hacer un ng-build agregandolo al arreglo de scripts de angular.json.
Para acceder a estos datos creamos un nuevo servicio con ng g s env y agregamos esta estructura.
Con el servicio creado, pero sin funcionar, tenemos que popular las variables que hemos definido en el servicio para que este se pueda inyectar. La manera de hacer esto es con un factory para nuestro servicio. Esto no se puede generar con cli, así que creamos un nuevo fichero con el nombre env.service.provider.ts, de preferencia junto al servicio que ya hemos creado y agregamos estos datos.
Hasta aquí todo funciona dependiendo de las modificaciones que hagamos al fichero env.js. Para desarrollo esta bien, pero para producción busqué un poco más de flexibilidad.
Yo trabajo con node para servir la página, así que después de un build necesito crear un servidor express para este fin. Instalo npm i express y creo un nuevo fichero en la raíz del proyecto que se llame server.js
Modificamos los scripts de esta manera. Como notaras, es necesario renombrar el fichero env.js a env.prod.js después de hacer el build porque queremos hacer llegar a angular variables de entorno y la única manera que encontré fue crear dinámicamente env.js en producción y servirlo desde express.js.
El fichero nuevo env.prod.js que renombramos desde env.js nos sirve como plantilla para exponer solo las variables que necesitamos. Así, dinámicamente se cargan y se exponen. Es necesario señalar que si accedo a miapp.com/env.js obtendré estas variables de manera que no es recomendable trabajar con datos sensibles. Solo es necesario modificar dos archivos, env.js que servirá como plantilla y env.service que nos ayudara a trabajar en angular.
Una de las cosas que me he encontrado últimamente en el trabajo es la necesidad de configurar mi aplicación de angular con diferentes parámetros para agilizar la distribución de una aplicación. Cuando trabajas con el backend es muy sencillo acceder a process.env para obtener claves secretas y configuraciones sensibles que no deben mostrarse en el...
En el post anterior hable un poco sobre las bondades del pipe date de angular. En este post en cambio quiero profundizar un poco más en las diferentes soluciones que nos ofrece angular así como las opciones que tenemos a nuestra para crear la nuestra propia.
Para presentar este nuevo blog me he decidido a publicar algo sencillo pero que me ha sido de bastante ayuda. No pocas veces en el desarrollo de un programa es necesario trabajar con fechas y en la gran mayoría de los casos me he visto metido en un grave problema al tratar de conciliar el formato de la base...