angular - 如何为 API Url 使用环境变量(前端使用 Angular 8、TypeScript、HTML 和 SCSS，后端使用 C#)

Question

我的 API 网址被硬编码为 localhost:4300在我的开发环境中(在 utilities.ts 中)

这些是下面的代码

实用程序.ts

const hostToApiUrlMap = { 
localhost: 'http://localhost:4300'
};

environment.prod.ts

export const environment {
production: true
};

environment.ts

export const environment {
production: false
};

我知道当我们进入生产环境时，API Url 会发生变化。
我的问题是“如何使用环境变量在前端配置 API Url，使其不会硬编码为 localhost:4300 ？

这样每当 API Url 发生变化时，开发环境都会自动更新到新的 API Url

Answer 1

我建议将这两个 URL 放在 environment.ts 中和 environment.prod.ts文件并直接从 environment.ts 导入.在编译时，Angular 编译器将使用 environment.prod.ts文件为 environment.ts如果您进行生产构建，则文件。
就像这样:

一些文件.ts

import { environment } from "~/environment/environment.ts" // Change this to your file location
console.log("Current API URL:", enviroment.apiUrl);

环境.ts

export const environment = {
  production: false,
  apiUrl: "http://localhost:4300"
}

环境.prod.ts

export const environment = {
  production: true,
  apiUrl: "https://your.actual.api"
}

这是因为 Angular 的构建配置。在 angular.json你会发现这个文件:

"fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.prod.ts"
  }
],

这意味着在生产模式下构建 environment.ts文件将被替换为 environment.prod.ts文件。