Traducido y resumido de este post
Es posible lograrlo simulando un enviroment de la siguiente manera:
- Creas un archivo llamado
env.js
con la siguiente estructura (no con cli
) a la misma altura que el index.html
(function (window) {
window.__env = window.__env || {};
// API url
window.__env.apiUrl = 'http://dev.your-api.com';
// Whether or not to enable debug mode
// Setting this to false will disable console output
window.__env.enableDebug = true;
}(this));
Esto creara una variable global __env
en el navegador conteniendo las variables de ambiente (enviroment) para nuestra aplicación.
- Agregamos una etiqueta
<script>
al elemento <head>
en nuestro indexh.html
para cargar env.js
antes de que angular sea cargado.
<html ng-app="app">
<head>
<!-- Cargar variables de ambiente -->
<script src="env.js"></script>
</head>
<body>
...
<!-- El código de Angular se carga aquí -->
</body>
</html>
- Le decimos a angular que al hacer
ng build
incluya este archivo:
{
"projects": {
"app-name": {
"architect": {
"build": {
"options": {
"assets": [
"src/favicon.ico",
"src/assets",
"src/env.js" // <= Agregamos aqui nuestro fichero
]
}
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
// ...
}
}
}
}
}
}
}
- Notificamos a angular de este nuevo archivo generando un servicio que cargue las variables en el scope de angular:
$ ng generate service env
Y reemplazamos el contenido:
export class EnvService {
// Los valores que sean definidos aqui son los valores por defecto
// que pueden ser sobreescritos por evn.js
// API url
public apiUrl = '';
// Habilitar o no el modo debug.
public enableDebug = true;
constructor() {
}
}
- Creamos un nuevo fichero manualmente llamado
env.service.provider.ts
en el mismo directorio del servicio que contenga lo siguiente:
import { EnvService } from './env.service';
export const EnvServiceFactory = () => {
// Creamos el ambiente
const env = new EnvService();
// Leemos las variables de ambiente desde la ventana del navegador
const browserWindow = window || {};
const browserWindowEnv = browserWindow['__env'] || {};
// Asignamos las variables de ambiente desde el navegador hacia env
// En la implementacion actual, las propiedades de env.js sobreescriben los
// valores por default en el EnvService
// Si lo necesitas, aquí se puede realizar una fusión profunda para fusionar propiedades en lugar de sobrescribirlas
for (const key in browserWindowEnv) {
if (browserWindowEnv.hasOwnProperty(key)) {
env[key] = window['__env'][key];
}
}
return env;
};
export const EnvServiceProvider = {
provide: EnvService, //Importamos este servicio definido con anterioridad
useFactory: EnvServiceFactory, //Exportamos el factory que crea la instancia de EnvService y copia los valores del objeto `window.__env` en la instancia de EnvService
deps: [],
};
- Agregamos
EnvServiceProvider
a los providers
para usar la inyección de dependencias de angular de esta manera:
import { NgModule } from '@angular/core';
import { EnvServiceProvider } from './env.service.provider';
@NgModule({
imports: [ // ... ],
providers: [EnvServiceProvider],
})
export class AppModule {}
Con estos pasos deberías de ser capaz de acceder a los datos en el fichero env.js
y modificarlos aun con tu código compilado.
Ejemplo de uso:
import { Component } from '@angular/core';
import { EnvService } from '../env.service';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss'],
})
export class HomeComponent {
constructor(
private env: EnvService
) {
if(env.enableDebug) {
console.log('Debug mode enabled!');
}
}
}
Cabe señalar que en el link que te pongo hace una demostración sobre cómo es posible modificar el fichero env.js
directamente en los archivos compilados para lograr lo que tu quieres sin necesidad de volver a compilar.
URL
desde el codigo y apartir del mismo codigo cambiar los valores de las propiedades que necesites en ese objeto, pues pasa algo curioso con los arrays y los objetos, y es que ninguno puede cambiar de puntero pero los espacios en memoria de ambos si que pueden ser modificados.