如何根据 angular 环境更改 index.html 中的变量值

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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 
}

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

我为 prod、staging 等环境创建了不同的文件夹，而不是使用变量，我根据环境放置了三个不同的 index.html，我在这里回答了相同的问题https://stackoverflow.com/a/67091452/1843984