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": [
    {
        "replace": "src/index.html",
        "with": "src/index.env.html"
    }
]

Answer 3

您可以将这些密钥添加到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 4

您可以在此处找到解决方案：How to use environment variable in index.html for Angular 6

TL，DR：针对每个环境使用文件并在angular.json中对其进行配置

Answer 5

使用可以简单地使用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 6

您可以简单地使用环境文件来管理您的不同环境，也可以使用我在我的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 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

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

8 个答案: