angular tutorial

Manera muy rápida y resumida

A Partir de angular 15 decidieron quitar esta opcion y tu podrías agregarlas manualmente o usar cualquier método para alternar urls entre ambientes.

la manera sencilla es con

ng generate environments

Angular 15: Cambios en los archivos de entorno

En Angular 15, los archivos de entorno se han eliminado de forma predeterminada. Esto se debe a varias razones, incluidas las siguientes:

  • Los archivos de entorno no eran necesarios para la mayoría de los proyectos de Angular. La mayoría de los proyectos de Angular solo necesitan una configuración para el entorno de desarrollo y una configuración para el entorno de producción.
  • Los archivos de entorno eran propensos a errores, ya que a menudo se olvidaban de incluirlos en el proyecto o se cambiaban incorrectamente. Esto podía provocar problemas al intentar construir o ejecutar el proyecto.
  • Los archivos de entorno no eran seguros, ya que podrían exponer información confidencial si se comprometía el proyecto.

En su lugar, Angular 15 utiliza el archivo angular.json para almacenar información confidencial. El archivo angular.json está cifrado por defecto, lo que lo hace más seguro que los archivos de entorno. Además, el archivo angular.json se incluye automáticamente en el proyecto, por lo que no es necesario recordar incluirlo.

Si necesita utilizar archivos de entorno en Angular 15, puede hacerlo creando un nuevo archivo llamado environment.ts en el directorio src/environments. El archivo environment.ts debe contener las siguientes definiciones:

export const environment = {
  production: {
    // Configuración para el entorno de producción
  },
  development: {
    // Configuración para el entorno de desarrollo
  }
};

A continuación, puede importar el archivo environment.ts en su proyecto y usar las variables environment.production y environment.development para configurar su aplicación.

Por ejemplo, el siguiente código configura una aplicación para usar diferentes claves de API en el entorno de producción y el entorno de desarrollo:

import { environment } from './environments/environment';

constructor(private http: HttpClient) {
  this.http.get('https://api.example.com/v1/users', {
    headers: new Headers({
      'Authorization': `Bearer ${environment.apiKey}`,
    }),
  });
}

Si está utilizando un proyecto de Angular 14 o anterior, puede agregar los archivos de entorno de backport a su proyecto siguiendo estos pasos:

  1. Cree un nuevo directorio llamado src/environments.
  2. En el directorio src/environments, cree dos nuevos archivos llamados environment.ts y environment.prod.ts.
  3. Copie el siguiente código en el archivo environment.ts:
export const environment = {
  production: {
    // Configuración para el entorno de producción
  },
  development: {
    // Configuración para el entorno de desarrollo
  }
};
  1. Copie el siguiente código en el archivo environment.prod.ts:
export const environment = {
  production: {
    // Configuración para el entorno de producción
  }
};
  1. A continuación, debe importar el archivo environment.ts en su proyecto y usar las variables environment.production y environment.development para configurar su aplicación.

Por ejemplo, el siguiente código configura una aplicación para usar diferentes claves de API en el entorno de producción y el entorno de desarrollo:

import { environment } from './environments/environment';

constructor(private http: HttpClient) {
  this.http.get('https://api.example.com/v1/users', {
    headers: new Headers({
      'Authorization': `Bearer ${environment.apiKey}`,
    }),
  });
}

Conclusión

Los archivos de entorno no se eliminaron de Angular, pero ya no se crean automáticamente por la CLI. Ahora tienes que crearlos tú mismo si quieres usarlos.

por Cesar Flores

Programador de tiempo completo, Gamer de medio tiempo y fotógrafo ocasionalmente, me gusta el front-end y mi framework favorito es angular aunque no por eso le hago el feo a un nuevo lenguaje.

Deja un comentario

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