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”


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

Relacionado:  Angular Router: navegar de manera programada

Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 496 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comments

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: