How to pass environment variables?

It is good practice to keep app`s config out of 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 example we will declare process.env.API_URL (and the short form 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 you want to access the variable only in the form of process.env.API_URL inside Argular2 app, this would be enough. If you want 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) {}

... `

Follow similar steps to update your webpack.prod.js file and use the production ip or domain name.

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