Angular-cli: Discuss: Pull in environment variables at build time

[Brocco]

When building/compiling an application it would be helpful to pull in local environment variables from the machine to be used within the application.

Please keep comments to whether this feature should be implemented not how to implement.

[DennisSmolek]

I'd like to see this. We had this ability in our previous build method using just webpack (mentioned in #4318 )

We use codeship for continuous deployment which automatically merges in build, branch, etc into our code that services like bugsnag look for.

we used to do this:

Bugsnag.releaseStage = environment.releaseStage;
// can't access process.env anymore with the CLI
  const commit = process.env.CI_COMMIT_ID;
  if (commit) Bugsnag.metaData = {
        commits: {
          id: commit
        }
      };

and then all bugs can be tracked from when they first appear, branches, etc. We have considered modifying other files with a bash script which would work but I figure other people would have other use cases where they needed to pass in server set variables.

Another use case I'm eager for is protecting API keys and access. Right now many of our hard coded API access keys exist as files in code repos because they have to be with environments.ts

But accidental key publishing happens all the time

We had a brief moment where switching a small bit of code to a docker that it got published public with a live firebase server key. We purged it but then we setup that NO CODE HAS KEYS and everything was saved as ENV variables during the build itself.

Allowing some sort of method to inject ENV variables would help protect against this...

[deebloo]

tldr; yes BUT

I think it makes sense to have some sort of system in place to make this happen for private keys and the like. The only issue that I would see is introducing node syntax into a FE app, and folks already confuse BE vs FE when generating a build. That may be to much in the weeds but I do think it is important when deciding if it should be implemented by the cli.

[yuzhva]

👍 +1 for having variables from the machine in process.env

@deebloo Not to be confused there is src/environments/environment.dev.ts and src/environments/environment.prod.ts files, where we could have hard coded data for developers and dynamic data from CI and production env variables.

src/environments/environment.dev.ts:

export const environment = {
  production: false,

  SENSITIVE_INFO: '6LeBcBqrXuYTDZq'
};

src/environments/environment.prod.ts:

export const environment = {
  production: true,

  SENSITIVE_INFO: process.env.SENSITIVE_INFO
};

[vilbara]

+1. We need to include git revision number and build number to display them on the application's "About" page:
http://stackoverflow.com/questions/42155115/how-to-include-git-revision-into-angular-cli-application

Having ability to include environment variables would do.

[cbeldacap]

@YUzhva Does it currently work?¿ Looks quite promising!
Regards and thanks in advance,
Cristóbal

[yuzhva]

@cbeldacap I don't know.
I didn't use angular for a long time...

[akarabach]

any news ?

[lslocum]

This feature would be great. We are storing api url's in our environments file and being able to set those based on the build would keep my environments folder from getting bogged down, and keep developers from having to make a new environments file (which is a code change) to bring up a new site.

[GaryB432]

If you guys are using Azure we created a build/release step that plugs environment variables into a small shim script. Works great.

[lslocum]

Thanks @GaryB432 I will check it out.

[glebmachine]

Any news?

[Riccardo-Andreatta]

I would suggest to take a look at this solution to avoid having your environments hardcoded in the repositories: https://medium.com/@natchiketa/angular-cli-and-os-environment-variables-4cfa3b849659

And also at its first response that introduce a dynamic solution to create the environments files: https://medium.com/@h_martos/amazing-job-sara-you-save-me-a-lot-of-time-thank-you-8703b628e3eb

[lacolaco]

I would like to record the git commit hash in my Angular app in order to send the app revision to event logging service (e.g. Bugsnag, Google Analytics, or etc.)

[schmkr]

This blogpost also shows an helpful technique to get this done:

https://medium.com/@amcdnl/version-stamping-your-app-with-the-angular-cli-d563284bb94d

[mgechev]

Thanks for all the blog posts! Closing the issue. If I'm missing anything, please open a new one explaining your use case.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}