1

Quisiera saber si en angular al momento de publicar mi proyecto, existe alguna forma de dejar la url del servidor a donde me voy a pegar para extraer los datos visible y poder cambiarla , como se hace en una publicación de un proyecto en C# .Net en el cual se realiza la publicación y se puede modificar el web.config.

Estoy publicando mi proyecto con el comando ng build --prod el cual me genera una estructura de archivos y carpetas las cuales copio en el servidor donde voy a publicar, al momento de realizar la publicación debo cambiar esta variable a true para que tome la url de producción y no la de desarrollo.

Servicio que provee la url a los servicios

El problema es que al momento de publicar se puede hacer en tres o cuatro ambientes.

1 respuesta 1

1

puedes crear varios archivos con la configuracion del ambiente que tu quieras con la actualizacion de la url servicio

ejemplo:

crea tres archivos con los nombres(puedes crear los ambientes que tu necesites qa1, staging, ..etc):

environment.ts environment.qa.ts environment.prod.ts

para cada archivo agrega la clase con las propiedades correspondientes para cada ambiente ejemplo environment.ts //environment dev

export const environment = {
  production: false,
  environmentName: 'Dev',
  apiUrl: 'localhost/miservicio/'
};

//en la clase componente donde requieras la url del servicio //se agrega el import

import { environment } from 'src/environment';

y en el constructor se agrega la variable

constructor() {

this.urlServicio = environment.apiUrl;

} }

en el archivo de configuracion se agregan la ruta de los archivos para los correspondientes ambientes.

"build": {
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environment.ts",
                  "with": "src/environment.prod.ts"
                }
              ],
            },
            "qa": {
              "fileReplacements": [
                {
                  "replace": "src/environment.ts",
                  "with": "src/environment.qa.ts"
                }
              ]
            }
...
}
}

finalmente cuando generas el paquete de produccion

ng build --configuration prod


----------Ahora suponiendo que quieres cambiar la apiurl para un proyecto ya compilado es evidente que se necesita un archivo extra digamos

envConfiguracion.js

a este achivo agregas la declaracion de una variable global.

(function (window) {
  window.__env = window.__env || {};

  // API url
  window.__env.apiUrl = 'http://urlApi';//parametro externo.

}(this));

//en index se agrega la referencia

//en el archivo de configuracion de angular se agrega la direccion para que sea parte del paquete

  "build": {
          "options": {
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/envConfiguracion.js"
            ]

//ahora puedes reutilizar tu metodo de obtencion de url GetUrlEnvironent

 const browserWindow = window || {};
  const browserWindowEnv = browserWindow['__env'] || {};

var parametroURL= browserWindowEnv.apiUrl;

2
  • 1
    Pero necesito poder decir a cual servidor o a cual ambiente va a ir cuando ya se encuentre compilado el proyecto , supongamos que tengo un archivo config para angular el cual define a que ambiente va a ir cambiando la url o poniendo un true o false, hay forma de hacerlo ? el 3 jul. 2019 a las 22:15
  • 1
    solo reutiliza tu metodo get api url y como puedes ver agrega dos variables globales una dev y otra con prod dependiendo de donde quieras publicar. puede ser modificado el archivo envConfig js el 3 jul. 2019 a las 22:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.