Pass environment variables to an Angular2 app?

Just put variables inside the environment object.

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

After that, you could import and use it. Angular Cli will swap files automatically.

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

P.S. Variables are available in environment object.

this.url = environment.url

I would see two ways to do that:

• Leverage a JSON configuration in a file. This file would be loaded before boostrapping the application:

  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();
  

  Here is a corresponding plunkr describing the global approach: https://plnkr.co/edit/ooMNzEw2ptWrumwAX5zP?p=preview.

• Leverage a configuration module:

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

  that will be imported and included in providers when bootstrapping the application:

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

With the two approaches, configuration can be defined for each environment when packaging the application.

This question could also give you hints about how to package an Angular2 application:

• How do I actually deploy an Angular 2 + Typescript + systemjs app?