Setting an environment variable during build

Question

I created an application with Angular -CLI and for debugging purposes I would like to show some information in the application about the build in progress. For example, branching time or git build time, etc.

I could write a script that manipulates src/environments/environment.ts , but I ask myself if there is a better way. Moreover, this file is part of source control.

Switching to Angular -CLI to overwrite the value of a variable would be nice. Let, say, the variables environment.build and environment.time set to dummys in environment.ts . Then, using ng --env[build]=master --env[time]=201612130742 I overwrite those that were calculated values.

But, as far as I know, something like this does not exist?

Answer 1

You can use gulp-ng-config to inject the configuration into the CI / CD process. Also, see this article for more information on how to implement this.

Answer 2

angular-cli comes with out-of-box environments. if you have already selected a project using ng eject , you will need to manually configure the environment files

you can pass environment variables to the webpack assembly for whatever values ​​you want. I use the env variable for transmission in the environment and select the environment configuration file, but you can set other variables as shown below.

My package.json provides an environment flag during the script build process

  "scripts": { "ng": "ng", "start": "webpack-dev-server --env.target=local --port=4200 --history-api-fallback", "build:prod": "webpack --env.target=prod --env.zip --env.aot --env.extreme --colors", 

You can use the environment flag

 // export a function that returns a promise that returns the config object module.exports = function(env) { const isAot = env.aot || false; const isZip = env.zip || false; const isExtreme = env.extreme || false; const isAnalyze = env.analyze || false; const isVirtualbox = env.virtualbox || false; const isLocal = env.target === 'local'; if(isLocal) { /* set the css file to a variable mycssfile*/ }