Framework Angular

Variables del entorno con Angular

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:

export const environment = {
  production: true,
  baseUrl: ".",
};
// This file can be replaced during build by using the `fileReplacements` array.
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.

export const environment = {
  production: false,
  baseUrl: "http://localhost/mascotas_angular",
};

/*
 * For easier debugging in development mode, you can import the following file
 * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
 *
 * This import should be commented out in production mode because it will have a negative impact
 * on performance if an error is thrown.
 */// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

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í:

import { environment } from "../environments/environment"

(recuerda que la ruta puede cambiar dependiendo de tu configuración)

Finalmente accedemos a environment.valor, por ejemplo:

export class MascotasService {
  // ...
  baseUrl = environment.baseUrl
  // ...
}

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 aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
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/

Ver comentarios

  • 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í?

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

1 semana hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

2 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

2 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

2 semanas hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

2 semanas hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

2 semanas hace

Esta web usa cookies.