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

Simplemente coloque variables dentro del objeto environment.

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

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

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

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

this.url = environment.url

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

1) Primero creé una interfaz describiendo mis 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 API de búsqueda de JavaScript a mi .archivo d. ts. (No es absolutamente necesario si no te importa tener fetch como sin resolver, pero me importó, por lo que agregó el tipos)

3) Así que ahora en mi main.ts puedo hacer una llamada al endpoint 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 puedo acceder a mis env vars en cualquier servicio o componente simplemente por:

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

Así que dentro de un método etc. usted podría ir como:

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

Tenga en cuenta que es posible que necesite polyfills para fetch API ya que Safari e IE aún no admiten esto. (Enlace a polyfill exampel )

Creo que esto podría ser útil para usted. Pasando asp.net parámetros del servidor para Angular 2 app

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

He implementado esto usando el siguiente enfoque:

1. Creado ts archivos para cada entorno.
2. Modificado package.json y añadido una nueva entrada para cada entorno en la sección scripts.

Por ejemplo:-

"start: local": "copy \" config / config.local.ts\" \"constantes/global.constante.ts\" && npm run start"

1. Importa global.constants a tu app.
2. Puede iniciar su servidor HTTP usando: npm run start:local

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

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

El código relevante puede tener este aspecto:

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';
}