Variables de Ambiente en Angular 2+

Las variables de ambiente son aquellas que nos permiten tener un valor en nuestros diferentes ambientes ya sea, en desarrollo o producción, por ejemplo la url de nuestra api en desarrollo es diferente a la de nuestra api en producción, más porque hacemos pruebas en nuestro ambiente local y no queremos modificar nada de los datos de producción, entonces Angular 2+ maneja muy bien este tipo de variables, las separa en una carpeta que se llama environments dentro de nuestra carpeta src, como se muestra en la siguiente imagen.

`

environment.js

export const environment = {
  production: false,
  api_url: 'http://localhost:3000/'
};

Este archivo es el que obtiene por default cuando ejecutas el comando ng serve o ng build si quieres utilizar el archivo environment.prod.ts que seria nuestras variables que apuntan a producción ejecutas el comando ng build –prod y utilizara ese archivo.

Pero para especificar en un archivo que utilizaras alguna variable de estos archivo debes importarlo en el archivo de esta manera:

//src/app//component/component.ts
import { environment } from '../../environments/environment';

y de esta manera para obtenerlas:

@Component({
  selector: 'my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css']
})
 export class MyComponent implements OnInit {
    api_url:string;
    constructor() {
       this.api_url = environment.api_url;
    }
}

ya con esto dependiendo del ambiente que ocupes obtener se va asignar el valor de la variable.

Leave a Reply

Your email address will not be published. Required fields are marked *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Do NOT follow this link or you will be banned from the site!
WP2FB Auto Publish Powered By : XYZScripts.com