Environment-based properties for Angular 2 App Served by Webpack?

Question

I\'m working with a standalone Angular console generated by JHipster and served by a Spring Boot server. I am looking to serve up the app with different properties based on

Answer 1

I recommend the dotenv-webpack plugin.

webpack.config.js

const  Dotenv  =  require('dotenv-webpack');
...
plugins: [
   new  Dotenv({
      path:  './.env'
   })
]

.env

URL=http://example.com
ENV=PROD
...

This allows you to use process.env to access the environment variables:

constructor(private http:HttpClient) {
     http.get(`${process.env.URL}`).subscribe(t=> {
        ...
     });
}

The environment variables are subsituted at build time.