如何在 Angular 中访问 Azure 静态 Web 应用程序应用程序设置？

Question

我将 Angular 应用程序作为静态 Web 应用程序部署到 Azure 中。现在我想使用配置中的应用程序设置来更改环境中的变量。ts 访问不同的 API 和 Application Insights，而无需每次都更改代码。

环境.ts

export const environment = {
  production: true,
  SERVER_API_URL: 'https://backend01.azurewebsites.net',
  DEVELOPER_OPTIONS: true,
  ENABLE_PROD_MODE: true,

  appInsights: {
    instrumentationKey: '<key>'
}
};

我想更改

instrumentationKey

和

SERVER_API_URL

。 这可以通过应用程序设置实现吗？有人知道如何做到吗？

Answer 1

可以使用 NPM 包，但是在以下 stackoverflow 问答中强烈警告不要使用它：如何在 Angular 中使用 Azure 应用程序配置

另一种可能性是使用 JSON 文件，如下例所示（相当旧，但有效）：https://devblogs.microsoft.com/premier-developer/angular-how-to-editable-config-files/ .

目前看来，Azure 静态网站中的环境变量仅支持服务器端代码，如此链接中的 MS 文档（第一个蓝色框）。 https://learn.microsoft.com/en-us/azure/static-web-apps/application-settings

根据下图，您可以探索的另一种方法是：创建一个可以读取配置设置的 azure 函数，然后在 Angular 应用程序启动时调用该 azure 函数来提供您需要的应用程序设置。不过我可以想象会有catch22的情况..