如何在Angular中配置和使用多個環境的API端點

在Angular中配置和使用多個環境的API端點可以通過以下步驟來實現：

1. 在src/assets目錄中創建多個環境配置文件，如environment.prod.ts、environment.dev.ts等。在這些文件中定義各個環境的API端點：

// environment.prod.ts
export const environment = {
  production: true,
  apiEndpoint: 'https://production-api.com'
};

// environment.dev.ts
export const environment = {
  production: false,
  apiEndpoint: 'https://dev-api.com'
};

2. 在angular.json文件中配置不同的環境配置文件：

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

3. 在代碼中根據不同的環境使用相應的API端點：

import { environment } from '../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private apiEndpoint: string = environment.apiEndpoint;

  constructor(private http: HttpClient) {}

  getItems() {
    return this.http.get(`${this.apiEndpoint}/items`);
  }
}

4. 在命令行中使用不同的配置來構建和運行應用程序：

ng serve --configuration=development
ng build --configuration=production

通過以上步驟，你可以在Angular應用中方便地配置和使用多個環境的API端點。