如何在角度中使用系统环境变量

Question

我一直在使用spring boot，它有一个很好的特性，可以在属性文件中使用系统环境变量，现在我想使用系统环境变量来设置后端服务器的url。我不确定这在 Angular 中是如何工作的。

例如。 BACKEND_URL=http://somerandomurl

我不想在配置文件中硬编码服务器 url。我想做类似 apiurl=$(BACKEND_URL)

这是因为我将在部署时使用 Kubernetes。

Answer 1

您可以使用 Angular environment.ts 文件来配置您的后端 URL。事实上，您可以根据需要分配多个后端 url。例如（产品、开发、质量保证）

 // environment.ts
    export const environment = {
      production: false,
      baseUrl: 'http://localhost:3333'
    };
    
 // environment.prod.ts
    export const environment = {
      production: true,  
      baseUrl: 'https://jsonplaceholder.typicode.com'
    };

 // environment.qa.ts
    export const environment = {
      production: true,  
      baseUrl: 'https://jsonplaceholder.typicode.com'
    };

然后您可以使用您喜欢的相关环境构建 Angular 项目。 Angular 将在构建时根据传递的参数分配基本 url。

ng build --configuration=prod
ng build --configuration=qa

从这里我附上官方角度文档的参考链接，说明如何做到这一点here。

还请在此处找到实际演示。请参考 stackblitz 示例here 及其相关文章here。