Read values from environment variable Angular 4

Question

I am trying to read the environment variable property using

process.env['KEY_TO_READ']

This KEY_TO_READ i am setting up in the environment variable. But, its not taking up at compile time only i am getting the below error:

Cannot find name 'process'.

Somewhere i read like in angular app we cannot use process because it will be defined at runtime. Is it correct ? If yes then can anyone suggest how i can achieve this . I don't want to use angular-cli environment file options.

See this [question](https://stackoverflow.com/q/49496438/9766215) — Prachi, May 29 '18 at 06:12

score 14 · Answer 1 · answered May 29 '18 at 06:00

14

You ll have your environment file as,

environment.ts:

export const environment = {  
  production: false,
  envName: 'dev',
  KEY_TO_READ: 'test'
};

It is exported so you can import it:

import { environment } from './environment';

export class MyappAppComponent {  
  title = 'myapp works!';
  KEY_TO_READ = environment.KEY_TO_READ;
}

answered May 29 '18 at 06:00

Sravan

18,467
3
30
54

2

thanks for answer but i dont want to put some variable inside the code. – Rohitesh May 29 '18 at 06:00
even you can use directly `environment.KEY_TO_READ` without storing in variable – Sravan May 29 '18 at 06:01
@Saravan Lets say i want to read the ip to call the backend but as it changes i don't want to build and change the ip in code instead i want to change it in the environment variable. By this i don't have to build my file again – Rohitesh May 29 '18 at 06:02
for the same purpose they have given two files one for `development` and the other for `production`, if you change in `production` build is required bit for development, it is not requiered. – Sravan May 29 '18 at 06:04
[this link will help you](https://medium.com/@natchiketa/angular-cli-and-os-environment-variables-4cfa3b849659) check **A process.env Problem** part of that – Sravan May 29 '18 at 06:06
@Rohitesh, checked that link? – Sravan May 29 '18 at 09:26

Prachi · Answer 2 · 2018-05-29T05:59:52.937

3

You may use it like this:

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

let KEY_TO_READ = environment.KEY_TO_READ;

It will pick the dynamic environment variable which you have defined at the time of application build.

edited May 29 '18 at 05:59

answered May 29 '18 at 05:58

Prachi

3,478
17
34

i don't want to keep the scope of variable inside the code that's why i was thinking to go with approach like this – Rohitesh May 29 '18 at 05:59
[This](https://scotch.io/tutorials/properly-set-environment-variables-for-angular-apps-with-gulp-ng-config) may help. – Prachi May 29 '18 at 06:03

score 2 · Answer 3 · edited Aug 21 '20 at 18:42

Passing a secret key inside the env file won't make it private it will remain public thus I have a solution for you where you could read a key from environment variable without mentioning it in environment.ts to do this you'll need to install few dependencies. these are the versions that are compatibles with Angular 7 probably few other you are free to try new versions.

"@angular-builders/custom-webpack": "^7.2.0",
"@angular-builders/dev-server": "^7.2.1",
"@angular-devkit/build-angular": "^0.12.3"

run

npm i @angular-builders/custom-webpack@7.2.0 @angular-builders/dev-server@7.2.1 @angular-devkit/build-angular@0.12.3

To be able to use custom web pack will have to add some changes to angular.json under your root folder

"build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig":{
          "path": "./extra-webpack.config.js" 
        },



"serve": {
      "builder": "@angular-builders/dev-server:generic",

create a file extra-webpack.config.js under your root folder and add this inside:

const webpack = require('webpack');

module.exports = {
plugins: [new webpack.DefinePlugin({
    'process.env': {
        KEY_TO_READ: JSON.stringify(process.env.KEY_TO_READ),
    }
})]
}

UPDATE

This also could cause you some troubles so if it works without the typings.d.ts it's better because you'll probably get an error later when everything is working fine declare var process nodejs.process error Variable 'process' must be of type 'Process', but here has type 'Process'. in that case just use the node types and delete the file typing.d.ts

If you try to use these variables, angular will complain about types definition. To get around that, create a file called typings.d.ts (d extension for declare) inside of your *src/ and put the following in there:

declare var process: Process;

interface Process {
 env: Env
}

interface Env {
 KEY_TO_READ: string
}

it's better to centralize your config in only the environment.ts file and use it this way

const KEY = `${process.env.KEY_TO_READ}`;
export const environment = {

production: false,
key : KEY
};

In order to make this work you need to run your app by running this command

KEY_TO_READ="TEST" npm start

you are now able to use the env variable inside your angular app in a someservice.ts

const Hash = `${environment.key}`;
export class SomeService{
console.log(Hash) //should display "TEST" in your console
}

Hope it helps.

Seems like defining `declare var process: Process;` complains because it was defined before in `index.d.ts` as `declare var process: NodeJS.Process;`. Instead it's better to [choose a different variable name as suggested](https://medium.com/@zeeyoo52/i-resolved-the-compilation-error-by-tweaking-the-tsconfig-json-76bf1333105c). — ahong, Oct 01 '19 at 15:54
@Kamel Mili istanbul@0.4.5: This module is no longer maintained, try this instead: i am getting this error while downloading dependency any idea? — Rohitesh, Oct 15 '19 at 15:35
What about production environment as if i build with command --build? — kazinayem2011, Jul 09 '20 at 15:30

Read values from environment variable Angular 4

3 Answers3