How to pass environment variables?

It is good practice to app`s config from our source code. Some motivation can be found in the 12 Factor App

Since we have webpack config files, why not use them to set our app`s config parameters that will be used in our Angular2 code as well?

Two main webpack config files can be used for this goal:

• angular2-webpack-starter/config/webpack.prod.js
• angular2-webpack-starter/config/webpack.dev.js

In those files the is a section Webpack Constants that can be used to declare the env`s constants. In this exable we will declare process.env.API_URL to be used inside ou Angular2 app code. To follow the convention in place, we will add this cons declaration to METADATA as well.

Thus our webpack.dev.js will look like: angular2-webpack-starter/config/webpack.dev.js `/**

• Webpack Constants */ const ENV = process.env.ENV = process.env.NODE_ENV = 'development'; const API_URL = process.env.API_URL = 'localhost'; const HMR = helpers.hasProcessFlag('hot'); const METADATA = webpackMerge(commonConfig.metadata, { host: 'localhost', API_URL: API_URL, port: 8080, ENV: ENV, HMR: HMR });`

Bottom in the plugin section, add the new entry in the list: `plugins: [

/**
 * Plugin: DefinePlugin
 * Description: Define free variables.
 * Useful for having development builds with debug logging or adding global constants.
 *
 * Environment helpers
 *
 * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
 */
// NOTE: when adding more properties, make sure you include them in custom-typings.d.ts
new DefinePlugin({
  'ENV': JSON.stringify(METADATA.ENV),
  'API_URL': JSON.stringify(METADATA.API_URL),
  'HMR': METADATA.HMR,
  'process.env': {
    'ENV': JSON.stringify(METADATA.ENV),
    'NODE_ENV': JSON.stringify(METADATA.ENV),
    'HMR': METADATA.HMR,
    'API_URL' : JSON.stringify(METADATA.API_URL),
  }
}),

],`

If one only desire to access the variable in the form of process.env.API_URL inside Argular2 app, this would be enough. If desired to use the shorter form API_URL, just follow the NOTE and go edit the custom-typings.d.ts in angular2-webpack-starter/src

angular2-webpack-starter/src/custom-typings.d.ts snippet `// Extra variables that live on Global that will be replaced by webpack DefinePlugin declare var ENV: string; declare var HMR: boolean; declare var API_URL: string;

interface GlobalEnvironment { ENV; HMR; API_URL; } In a service provider inside your app, just use your new global variable coming from your webpack config file:@Injectable() export class DaoService {

private _service1Url = 'http://' + process.env.API_URL + ':3000/api/service1';  // URL to web api
private _service2Url = 'http://' + API_URL + ':3000/api/service2';  // URL to web api
constructor (private http: Http) {}

... `

This wiki was originally created by Roy Bao as a response to the issue 386.