运行时Angular 2 Webpack环境配置

Question

I'm using Webpack to build my Angular project.

I have an env.js file that looks like:

module.exports.ENV = {
  API_URL: "http://localhost:5001/",
  ...
};

And in my webpack.common.js , I have:

const API_URL = require('./env').ENV.API_URL;
const METADATA = {
  API_URL: API_URL,
  title: "Angular Project",
  ...
};

This is nice because I am able to configure my environment variables in a single env.js file. However, this configuration is in the build process. This is bad because I cannot just build once and run in every environment (given the environment has a env.js ), instead, for each environment, I have to build a new instance of the project - which I don't think is the best practice.

So my question is: is there any way I can configure my environment variables at runtime with Angular 2 and Webpack?

Answer 1

Webpack recommends using process.env.NODE_ENV:

https://webpack.js.org/guides/environment-variables/

I've used this in many places:

const ENV = process.env.ENV = process.env.NODE_ENV = 'development';

There is another library package cross-env that you can call on command-line to set the environment variable, and execute a process at the same time.

You could also define your environment variables from your webpack plugins (via the DefinePlugin):

new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}),