How to change variable value in index.html based on the environment in angular

Question

How can i change config.apiKey value based on the angular environments like Development & Production.

For Production config.appKey = 'AB-AAB-AAB-MPR';

For Development config.appKey = 'AC-DDR-SST-DKR';

Please find the code for reference.

`<script charset='UTF-8'>
    window['adrum-start-time'] = new Date().getTime();
    (function(config){
        config.appKey = 'AC-DDR-SST-DKR';
    })(window['adrum-config'] || (window['adrum-config'] = {}));
  </script>
`

Thanks

score 9 · Accepted Answer · answered Feb 06 '20 at 07:00

Reading environment file in index.html will be difficult. I am not saying it is not possible there may be a workaround for that. But I recommend you to do this in app.component.ts file on

ngOnInit() {
    this.loadScript();
}

private loadScript() {
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.innerHTML = 'window["adrum-start-time"] = new Date().getTime(); (function(config){ config.appKey = ' + environment.key + '; })(window["adrum-config"] || (window["adrum-config"] = {}));';
    const head = document.getElementsByTagName('head')[0];
    if (head !== null && head !== undefined) {
      document.head.appendChild(script);
    }
}

Hopefully, this will solve the problem

score 2 · Answer 2 · answered Feb 06 '20 at 06:17

You can use your angular.json to replace your index.html file. just create a copy of the index.html and name it to index.env.html and then in your angular.json you can use fileReplacements in your specific env like the following

"fileReplacements": [
    {
        "replace": "src/index.html",
        "with": "src/index.env.html"
    }
]

score 1 · Answer 3 · edited Feb 08 '21 at 14:07

You can simply use isDevMode()

or else use this way

└──myProject/src/environments/
                   └──environment.ts
                   └──environment.prod.ts
                   └──environment.stage.ts

export const environment = {
  production: false,
  apiUrl: 'http://my-api-url'
};

export const environment = {
  production: true,
  apiUrl: 'http://my-prod-url'
};

Read more on angular guide

score 0 · Answer 4 · answered Feb 06 '20 at 06:20

you can add those key in environment.ts and environment.prod.ts file so you need to write the development api key in environment.ts and production key in environment.prod.ts so if you are creating a build by using a this command ng build --prod it will take the api key from environment.prod.ts file. here is the example

environment.ts

export const environment = {
  production: false,
  appKey: 'AB-AAB-AAB-MPR';
};

environment.prod.ts

export const environment = {
  production: true,
  appKey: 'AC-DDR-SST-DKR';
};

service

// here we are importing our environment like this 
import { environment } from '../../environments/environment';

getData() {
   console.log(environment.apiKey);
// here you will get the apiKey based on your environment if it is dev environment then it take the "apiKey" from environment.ts and if it is production env then it will take the "apiKey" from the environment.prod.ts
// api call or other business logic 
}

score 0 · Answer 5 · answered Feb 06 '20 at 06:21

0

You can find solution here: How to use environment variable in index.html for Angular 6

TL,DR: use files for each enviroment and config it in angular.json

answered Feb 06 '20 at 06:21

thanhdx

608
4
16

score 0 · Answer 6 · answered Apr 14 '21 at 12:13

0

I created different folder for prod, staging etc environment and instead of using variable, I placed three different index.html as per the environment, I answered the same here https://stackoverflow.com/a/67091452/1843984

answered Apr 14 '21 at 12:13

44kksharma

2,740
27
32

score -1 · Answer 7 · answered Feb 06 '20 at 06:28

you can simply either use env files to manage your different environments or else you can also use this i have use in my react app as below in your package.json use

 "start": "react-scripts start",
        "start:staging": "REACT_APP_BUILD_TYPE=staging  npm start",
        "start:prod": "REACT_APP_BUILD_TYPE=production  npm start",
        "build": "REACT_APP_BUILD_TYPE=production react-scripts build",
        "build:staging": "REACT_APP_BUILD_TYPE=staging react-scripts build",
},

and the file you have written above can be use as

"REACT_APP_BUILD_TYPE=staging ? config.appKey = 'AB-AAB-AAB-MPR' : config.appKey = 'AC-DDR-SST-DKR';

score -1 · Answer 8 · answered Feb 06 '20 at 06:34

-1

export const environment = {
  production: true,
  apiUrl: 'http://my-api-url',
  appKey: 'AC-DDR-SST-DKR'
};

check the angular.json file for fileReplacements config here it is: stackblitz

answered Feb 06 '20 at 06:34

chandirasekaranid

64
1
6

but how i will pass that appKey value to index.html as index.html runs out of angular context – Bikshu s Feb 06 '20 at 06:40
I have updated it in https://stackblitz.com/edit/angular-ftda85 please look at app.component.html, app.component.ts – chandirasekaranid Feb 06 '20 at 06:52

How to change variable value in index.html based on the environment in angular

8 Answers8