I know about the environment.ts files in Angular, but with those I end up itting sensitive data to my git repo. In Java I can just refer to OS environment variables which I can set on my server.

In our pany the CI dockers all our applications and pushes them into OpenShift, which means I don't have access to the file system, so I can not just put a production environment.ts there manually.

Does anyone have an idea how to get to the OS environment variables?

I know about the environment.ts files in Angular, but with those I end up itting sensitive data to my git repo. In Java I can just refer to OS environment variables which I can set on my server.

In our pany the CI dockers all our applications and pushes them into OpenShift, which means I don't have access to the file system, so I can not just put a production environment.ts there manually.

Does anyone have an idea how to get to the OS environment variables?

• javascript
• angular
• typescript
• docker
• environment-variables

• Through a webservice that'd need to be deployed on the same machine? – David Commented Jul 5, 2018 at 13:08
• In our environment there only can be one deployment per virtual machine and there is also only one port available. It is kind of restricted when it es to stuff like that. – M. Heller Commented Jul 6, 2018 at 7:28
• so you create one package for all environments? – David Commented Jul 6, 2018 at 7:30
• But then I could also just hardcode my data in the first application. Our CI just pulls the code from the git repository, dockerizes it and deploys it into an OpenShift application. Two repositories -> two applications with two different routes and URLs – M. Heller Commented Jul 6, 2018 at 7:42
• Check this out blog.usejournal./… – theTypan Commented Sep 20, 2019 at 18:28

2 Answers 2

1. Have an API that serves the config, and retrieve that from angular

   app.get("/api/config/default", function(req, res) {
     res.send({
      a: process.env["A_VAR"]
     });
   })
   

2. Have your back-end generate the angular constants

   app.get("/generated-config.js", function(req, res) {
     res.send(
       "angular.module('myApp').constant('MY_CONFIG',"
        + "{'a': \"" + process.env["A_VAR"] + "\""
        + "})"
      );
   });
   

   For which you can use ng-constant. I like this approach better because blocking angular controllers and services that depend on this config bees very easy. In my case, the back-end generates this file and serves it together with the rest of the static files.

If you are bundling your angular application with webpack, you can use webpack.DefinePlugin.

plugins: [
    new webpack.DefinePlugin({
        "some_variable": JSON.stringify(process.env.SOME_ENV_VAR || "my_default_value")
    })
]

Then you can reference "some_variable" in your angular application. You can declare them in your typings.d.ts file so they are recognized.

declare const some_variable: string

You can always have a web service that can serve you these variables through api calls as well.