Angular 4 and environment variables

Question

I am trying to deploy an app based on angular to bluemix and I want to use system variables (process.env). Somehow this does not work and process only contains title=browser and an empty env object. I set them on the environment but I can't get the dotenv to work. The app is based on the angular-cli.

Does somebody know how to safely store api keys with or without dotenv and such?

EDIT: some code from the app.module. I also tried it in the main.ts file but to no avail.

export function restServiceLoader(logger: NGXLogger, http: HttpClient): any {

  logger.debug('test is ' + process.env.TEST);

  return new ApiDataService(logger, http);

}

it should work some code will help on how you are using the same — Rahul Singh
– Rahul Singh, Commented Jan 12, 2018 at 7:54
I'm sure you don't want to do it, at least when it comes to public projects. Giving up the env variables to the public is surly not a good idea. — Dawid Zbiński
– Dawid Zbiński, Commented Jan 12, 2018 at 7:58
Maybe this helps you with API Keys. You can use the environment file of Angular. stackoverflow.com/questions/46441288/… — alfredson
– alfredson, Commented Jan 12, 2018 at 8:02

Sherif Ali · Accepted Answer · 2018-07-06 06:28:33Z

0

The environment variable you are setting on Bluemix is for the container hosting your Angular application. The environment variable you are trying to read in your Angular application is for the browser's environment e.g. where the Angular application is running.

You can either use a class to keep your configuration as constants, as suggested by John and explained here or you can make a call to your backend to get configurations that are only kept at the backend.

Design-wise, sensitive configurations should not be kept in your frontend/Angular application e.g. browser environment because it is vulnerable there and you have little to no control on how it is secured and maintained.

answered Jul 6, 2018 at 6:28

Sherif Ali

1351 gold badge2 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

John · Accepted Answer · 2018-01-12 08:20:21Z

-1

You can use the environment.ts file located under the src/environments folder which looks something like this:

export const environment = {
  production: false,
  api:'http://someApi.com'
};

Then use the environment in your component/service:

import {environment} from '../environments/environment';

and use it like this: environment.api anywhere in that component or service.

I would not store private keys in the environment file, only public ones.

answered Jan 12, 2018 at 8:20

John

11.6k5 gold badges60 silver badges75 bronze badges

4 Comments

user3197307 Over a year ago

But what if i want to store private keys?

John Over a year ago

store the private keys on your server. Or on bluemix. I am not familiar with bluemix though.

user3197307 Over a year ago

So make a seperate environment file on the server?

John Over a year ago

I would create an environment.api in Angular, sending api request to a proxy server. Store and use the private key on the proxy server. How you do that to work with bluemix is unknown to me. Sorry I cannot be of more help.

Collectives™ on Stack Overflow

Angular 4 and environment variables

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related