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

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

• javascript
• angular
• angular6

8 Answers 8

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

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"
    }
]

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

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 
}

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

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

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';

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