如何根據 angular 環境更改 index.html 中的變量值

Question

我如何根據開發和生產等角度環境更改 config.apiKey 值。

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

讀取 index.html 中的環境文件會很困難。 我並不是說不可能有解決方法。 但我建議您在 app.component.ts 文件中執行此操作

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);
    }
}

希望這能解決問題

Answer 2

您可以使用 angular.json 替換index.html文件。 只需創建index.html的副本並將其命名為index.env.html ，然后在您的angular.json您可以在您的特定fileReplacements中使用fileReplacements ，如下所示

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

Answer 3

您可以簡單地使用isDevMode()

否則使用這種方式

└──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'
};

閱讀有關角度指南的更多信息

Answer 4

您可以添加在這些關鍵environment.ts和environment.prod.ts所以你需要寫在發展的API密鑰文件environment.ts在生產關鍵environment.prod.ts所以如果你正在使用此命令創建構建ng build --prod它將從environment.prod.ts文件中獲取 api 密鑰。 這是例子

環境.ts

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

環境.prod.ts

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

服務

// 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

您可以在這里找到解決方案： How to use environment variable in index.html for Angular 6

TL，DR：為每個環境使用文件並在 angular.json 中進行配置

Answer 6

你可以簡單地使用 env 文件來管理你的不同環境，或者你也可以使用我在我的反應應用程序中使用的這個，如下你的 package.json 使用

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

你上面寫的文件可以用作

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

檢查 angular.json 文件中的 fileReplacements 配置，它是： stackblitz

Answer 8

我為 prod、staging 等環境創建了不同的文件夾，而不是使用變量，我根據環境放置了三個不同的 index.html，我在這里回答了相同的問題https://stackoverflow.com/a/67091452/1843984