How to hide environment file data in production mod angular 7

Question

We are using Angular 7 and declare some Key variable(API Key, salt) in Angular environment file for encryption/decryption purpose. But problem is that the environment file is visible by view sourcing the main.js file bundle after compilation in prod environment (Live server). Our aim is hide env file data from view sourcing.

File name - environment.prod.ts

export const environment = {
  production: true,
  api: '',
  secratePhrase: '',
  key: '***********',
  salt: '******************',
  upload_url: '',
  frontend_url: '',
  recaptchasiteKey: '',
  siteTitle: '',
  jsonFileUrl: '',
  unauthorised_msg: '',
  map_embed_key: '',
  map_embed_zoom: **
};

Please help us in this matter.

Thanks.

Answer 1

If you are making api requests with secret keys or must have enc/dec keys in the angular app then it's not possible to hide it in any way.

but what you can do is create an api in the backend and store your keys there and you can hit the api endpoint from your angular app, that way you can hide the keys in the server. and ofcourse you would have some kind of authentication in the backend