Resumen: aprender a usar las variables del entorno de angular usando archivo environment.prod.ts y environment.ts para diferenciar entre entorno de producción y entorno de desarrollo.
Ejemplo de variables del entorno de Angular
Estoy a punto de publicar mi artículo sobre cómo conectar PHP con Angular; pero para ello tuve que hacer una diferencia entre el entorno de desarrollo y producción.
Esto es porque en modo producción, los archivos JS de Angular serán servidos en la misma URL que los de PHP, así que la URL base es .
En cambio, en modo desarrollo, Angular es servido en una URL distinta y la URL es localhost/mascotas_angular
Debo cambiar esto para que al compilar con la cli usando ng build --prod se cambie el valor automáticamente.
Diferente valor en cada entorno
Veamos los archivos:
En el que tiene prod.ts estoy definiendo una URL distinta a la que no lo tiene. Para usar cada valor, debemos importar el archivo así:
(recuerda que la ruta puede cambiar dependiendo de tu configuración)
Finalmente accedemos a environment.valor, por ejemplo:
Y no debemos preocuparnos por nada más. Angular se encargará de proporcionar los valores, nosotros simplemente accedemos al valor y dependiendo del entorno se tomará uno o el otro.
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”
Hola, pablo. Actualmente estoy en un proyecto angular, y mi situación es configurar de igual forma un ambiente dinámico para que se consuman estas variables, en algún fichero o servidor. Me preguntaba si logro obtener alguna solución a este problema, muchas gracias.
Esa es una buena solución, pero ¿Qué se puede hacer para solo hacer una única compilación y esas variables de entorno ya existan en cada entorno en algún fichero y las lea de ahí?