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

Question

如何根据开发和生产等 angular 环境更改 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

您可以使用 angular.json 替换 index.html 文件。只需创建 index.html 的副本并将其命名为 index.env.html 然后在您的 angular.json 中，您可以在您的特定环境中使用 fileReplacements，如下所示

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

Answer 2

您可以在 environment.ts 和 environment.prod.ts 文件中添加这些密钥，因此您需要在 environment.ts 中编写开发 api 密钥，在 environment.prod.ts 中编写生产密钥] 因此，如果您使用此命令 ng build --prod 创建构建，它将从 environment.prod.ts 文件中获取 api 键。这是示例

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

服务

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

您可以在这里找到解决方案：

TL,DR: 为每个环境使用文件并在 angular.json

中配置

Answer 4

您可以简单地使用 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'
};

阅读更多关于angular guide

Answer 5

您可以简单地使用 env 文件来管理您的不同环境，或者您也可以使用我在我的 React 应用程序中使用的这个，如下所示在你的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 6

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

检查 angular.json 文件的 fileReplacements 配置这是：stackblitz

Answer 7

读取 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 8

我为 prod、staging 等环境创建了不同的文件夹，而不是使用变量，我根据环境放置了三个不同的 index.html，我在这里回答相同

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

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

javascript

angular

angular6