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:
- Cree un nuevo directorio llamado
src/environments
. - En el directorio
src/environments
, cree dos nuevos archivos llamadosenvironment.ts
yenvironment.prod.ts
. - 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
}
};
- Copie el siguiente código en el archivo
environment.prod.ts
:
export const environment = {
production: {
// Configuración para el entorno de producción
}
};
- A continuación, debe importar el archivo
environment.ts
en su proyecto y usar las variablesenvironment.production
yenvironment.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.