data - page title angular 4

¿Pasar variables de entorno a una aplicación Angular2?

Question

Necesito pasar la url backend a mi aplicación Angular2, ya que los servidores de desarrollo y de desarrollo están alojados en diferentes ubicaciones.

Sé que podría almacenar esas cosas en un config.json externo y cargar en el inicio. Esto, sin embargo, parece una llamada adicional innecesaria al servidor antes de que la aplicación pueda comenzar.

Alternativamente, lo que hago ahora es crear una única variable global, que inyecto de manera trágica dependiendo de la compilación. Mi aplicación no es una biblioteca que deba ser reutilizable. No creo que deba golpear choques de nombres globales inesperados . Pero no es una buena práctica.

Me pregunto si hay una tercera solución, ¿mejor?

Answer 1

Creo que esto podría ser útil para usted. Pasando los parámetros del servidor asp.net a la aplicación Angular 2

De esta manera, puede inyectar cualquier valor de la página html (que puede obtener valor del servidor, como la variable de entorno actual)

Answer 2

En diferentes entornos , el valor de location.host será diferente.

Use esto como la clave y cargue los valores del json correspondiente que tiene todas las URL.

El código relevante puede verse así:

let env = location.host;
if (env === ''prod.example.com'') {
  config = ''ProdConfig.json'';
} else if (env === ''test.example.com'') {
  config = ''TestConfig.json'';
} else if (env === ''localhost'') {
  config = ''DevConfig.json'';
}

Answer 3

He estado luchando con lo anterior por un tiempo también. Y a pesar de que la respuesta de Thierry es muy buena, pero de alguna manera me resulta demasiado complicada simplemente para tener env vars, así que pensé que también presentaba mis pensamientos.

1) Primero creé una interfaz que describía mi aplicación env vars app.settings.ts :

export interface IEnvVars {
    ENV: string;
    API_URL: string;
}

export class AppSettings {
    public static env_vars: IEnvVars;
}

2) Agregué las definiciones de tipo de API de recuperación de JavaScript a mi archivo .d.ts. (No es absolutamente necesario si no te importa tener que recuperar como no resuelto, pero me importó, así que agregué los tipos)

3) Así que ahora en mi main.ts puedo hacer una llamada al punto final que devuelve las variables de entorno:

import {bootstrap}    from ''angular2/platform/browser'';
import {AppComponent} from ''./app.component'';
import {AppSettings,IEnvVars} from "./configs/app.settings";
import {enableProdMode} from "angular2/core";

fetch(''/env-vars'', {method: ''get''}).then((response) => {
    response.json().then((env_vars:IEnvVars) => {
        AppSettings.env_vars = env_vars;
        if (AppSettings.env_vars.ENV != ''development'') enableProdMode();
        bootstrap(AppComponent);
    });
});

Así que ahora accedo a mis variables env en cualquier servicio o componente simplemente por:

import {AppSettings} from "../configs/app.settings";

así que dentro de un método, etc. podrías ir como:

let customersURL = `${AppSettings.env_vars.API_URL}/customers`;

Tenga en cuenta que es posible que necesite polyfills para obtener la API, ya que Safari e IE aún no lo admiten. ( Enlace a exampel de polyfill )

Answer 4

He implementado esto utilizando el siguiente enfoque:

1. ts archivos ts para cada entorno.
2. Modificó package.json y agregó una nueva entrada para cada entorno en la sección de scripts.

por ejemplo: -

"start: local": "copy /" config / config.local.ts / "/" constants / global.constants.ts / "&& npm run start"

3. Importe global.constants en su aplicación.
4. Puede iniciar su servidor HTTP usando: npm run start:local

Answer 5

Me gustaría ver dos maneras de hacer eso:

• Aproveche una configuración JSON en un archivo. Este archivo se cargaría antes de impulsar la aplicación:

  var app = platform(BROWSER_PROVIDERS)
     .application([BROWSER_APP_PROVIDERS, appProviders]);
  
  var http = app.injector.get(Http);
  http.get(''config.json'').subscribe((config) => {
    return app.bootstrap(AppComponent, [
      provide(''config'', { useValue: config })
    ]);
  }).toPromise();

  Aquí hay un plunkr correspondiente que describe el enfoque global: https://plnkr.co/edit/ooMNzEw2ptWrumwAX5zP?p=preview .

• Aproveche un módulo de configuración:

  export const CONFIG = {
    (...)
  };

  que se importará e incluirá en los proveedores al iniciar la aplicación:

    import {CONFIG} from ''./config'';
  
    bootstrap(AppComponent, [
      provide(''config'', { useValue: CONFIG })
    ]);

Con los dos enfoques, la configuración se puede definir para cada entorno al empaquetar la aplicación.

Esta pregunta también podría darle sugerencias sobre cómo empaquetar una aplicación Angular2:

• ¿Cómo implemento realmente una aplicación de Angular 2 + Typescript + systemjs?

Answer 6

Solo hay que poner variables dentro del objeto entorno.

export const environment = {
  production: false,
  url: ''http://localhost:3000/api''
};

Después de eso, puedes importarlo y usarlo. Angular Cli intercambiará archivos automáticamente.

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

Las variables PS están disponibles en el objeto de entorno.

this.url = environment.url