Configurar variables de entorno en Angular

En el despliegue profesional de Angular se requieren ligeros cambios a la hora de diferenciar el desarrollo local y la puesta en producción de la web.

Uno de las formas mas simples de solventar este tipo de problemas es la puesta en producción y diferenciarla de el entorno de desarrollo en este Framework.

primero debemos ubicar los archivos environment.ts y environment.prod.ts con los cuales Angular crea la diferencia (producción y desarrollo) entre los entornos usando uno y otro archivo de configuración.

Angular los crea por defecto en el directorio src/environments/

En este archivo añadimos al objeto environment las variables que necesitemos en nuestro proyecto. En este caso la variable url con el valor de localhost porque es donde trabajo con mi local:server

environment.ts

luego en el otro archivo configuraremos los valores de las variables de nuestro código para el entorno de producción.

environment.prod.ts

Luego en los componentes o servicio de su proyecto llama a las variables con un simple import

import { environment } from 'src/environments/environment';

y para llamar a la variable es sencillamente

environment.url;

Después de ajustar como necesites las variables puedes desplegar el server

ng serve --dev     // Or 
ng serve --prod