Cómo utilizar variables de entorno en Angular

Introducción

Si estás creando una aplicación que usa una API, querrás usar tu clave API para entornos de prueba durante el desarrollo y tu clave API para entornos en vivo durante la producción. En Angular, puedes crear variables de entorno con el environment.tsarchivo.

Nota: esta publicación se aplica a las aplicaciones Angular 2+.

En este tutorial, aprenderá a utilizar variables de entorno en Angular.

Prerrequisitos

Si deseas seguir este artículo, necesitarás:

• Un entorno de desarrollo local para Node.js. Sigue Cómo instalar Node.js y crear un entorno de desarrollo local .

Este tutorial fue verificado con Node v16.2.0, npmv7.15.1 y @angular/corev12.0.3.

Detectando el entorno

Los proyectos de Angular CLI ya usan una productionvariable de entorno para habilitar el modo de producción cuando están en el entorno de producción:

origen/main.ts

// ...if (environment.production) {  enableProdMode();}

Angular también nos proporciona una función de utilidad llamada isDevModeque permite verificar si la aplicación se está ejecutando en modo de desarrollo:

src/app/app.component.ts

import { Component, OnInit, isDevMode } from '@angular/core';@Component({ ... })export class AppComponent implements OnInit {  ngOnInit() {    if (isDevMode()) {      console.log('Development!');    } else {      console.log('Production!');    }  }}

Este código de ejemplo cerrará la sesión del mensaje 'Development!en modo de desarrollo y cerrará la sesión del mensaje Production!en modo de producción.

Adición de variables de desarrollo y producción

Y también notarás que, de forma predeterminada, en la /src/environmentcarpeta tienes un archivo de entorno para desarrollo y uno para producción.

Digamos que queremos usar una clave diferente dependiendo de si estamos en modo de desarrollo o producción:

Para configuraciones de desarrollo en environment.ts:

src/environment/environment.ts

export const environment = {  production: false,  apiKey: 'devKey'};

Para configuraciones de producción en environment.prod.ts:

src/medio ambiente/medio ambiente.prod.ts

export const environment = {  production: true,  apiKey: 'prodKey'};

Y en nuestro componente lo único que tenemos que hacer para acceder a la variable es lo siguiente:

src/app/app.component.ts

import { Component } from '@angular/core';import { environment } from '../environments/environment';

Angular se encarga de intercambiar el archivo de entorno por el correcto.

Ejecute el modo de desarrollo con:

ng serve

La apiKeyvariable se resuelve en devKey.

Ejecute el modo de producción con:

ng serve --configuration=production

Nota: Anteriormente, --prodse recomendaba esta opción, pero ya no se utiliza para --configuration=production.

La apiKeyvariable se resuelve en prodKey.

Agregar variables de ensayo

Agregue nuevos entornos en proyectos de Angular CLI agregando nuevas entradas al configurationscampo en el angular.jsonarchivo.

Nota: Anteriormente, esta configuración se establecía en .angular-cli.json.

Agreguemos un entorno de prueba basado en la configuración utilizada por producción:

angular.json

{  // ...  "projects": {    "angular-environment-example": {      // ...      "prefix": "app",        "build": {          // ...          "configurations": {            "staging": {              // ...              "fileReplacements": [                {                  "replace": "src/environments/environment.ts",                  "with": "src/environments/environment.stage.ts"                }              ],              // ...            },            // ...          },        },        "serve": {          "builder": "@angular-devkit/build-angular:dev-server",          "configurations": {            "staging": {              "browserTarget": "angular-environment-example:build:staging"            },          }        },      }    }  }}

Y ahora podemos agregar un archivo de entorno de ensayo:

src/environments/environment.stage.ts

export const environment = {  production: true,  apiKey: 'stagingKey'};

Ejecute el modo de desarrollo con:

ng serve --configuration=staging

Nota: Anteriormente --env=stagingse recomendaba la opción pero ha sido reemplazada por --configuration=staging.

La apiKeyvariable se resolverá en stagingKey.

Conclusión

En este tutorial, aprendió a usar variables de entorno en Angular.

Si desea obtener más información sobre Angular, consulte nuestra página de temas de Angular para ver ejercicios y proyectos de programación.