almacenaría la url base en el entorno.ts

 export const environment = { production: false, baseUrl: 'http://example.com/api' };

y para las URL de API, crearía una enumeración:

 export enum ApiPaths { Auth = '/auth', Foo = '/foo', Bar = '/bar' }

Y luego usarlo en el servicio:

 import { environment } from '../environments/environment'; import { ApiPaths } from '../enums/api-paths'; @Injectable() export class FooService { baseUrl = environment.baseUrl; constructor(private httpClient: HttpClient) { } getAll() { let url = `${this.baseUrl}/${ApiPaths.Foo}/all`; return this.httpClient.get<JSON>(url); } }

Las otras respuestas proporcionadas brindan excelentes formas de almacenar y acceder a la URL base, personalmente la almaceno en el environment.ts y la inserto en las solicitudes de un HttpInterceptor .

Lo que quiero tratar de abordar en su pregunta es administrar los puntos finales después de la URL base. Esto es algo para lo que me encantaría ver una mejor solución, pero es lo que uso en este momento.

En cada servicio Angular que realiza llamadas http a la API, tengo una propiedad como esta:

 private readonly API_ROUTES = { getUser: (userId: string) => `/user/${userId}` }

Esto es aplicable a mi método de pasar argumentos, si usa parámetros de consulta, puede ajustar esto para manejar eso.

El método correspondiente puede usar esto:

 public getUser(userId: string): Observable<User> { return this.http.get<User>(this.API_ROUTES.getUser(userId)); }

clase de ejemplo completo:

 import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class UserService { private readonly API_ROUTES = { getUser: (userId: string) => `/user/${userId}` } constructor(private http: HttpClient) { } public getUser(userId: string): Observable<User> { return this.http.get<User>(this.API_ROUTES.getUser(userId)); } }

Obviamente, esto podría extraerse aún más para tener todas las rutas API en un archivo en algún lugar, como sugirió otra persona, podría ser simplemente api-routes.ts .

Espero que alguien más tal vez tenga mejores patrones, ya que siento que esta no es la mejor solución.

En nuestro proyecto hicimos diferentes archivos de entorno para desarrollo, producción, puesta en escena.

medio ambiente.dev.ts

medio ambiente.puesta en escena.ts

medio ambiente.prod.ts

usamos el script package.json para tomar qué URL de API debe cargarse

 "scripts": { "ng": "ng", "start:dev": "ng build --prod -c=dev", "start:qa": "ng build --prod -c=qa", }

por lo que cargará la API requerida

archivo de servicio de ejemplo

 import { Injectable } from '@angular/core'; import { AuthService } from 'src/app/auth.service'; import { HttpClient, HttpHeaders } from '@angular/common/http'; import { environment } from 'src/environments/environment'; @Injectable({ providedIn: 'root' }) export class NetworkService { private apiUrl: string = environment.BASE_URI; options; constructor(private authService: AuthService, private http: HttpClient) {} updateNetwork(formValue) { this.authService.loadToken(); const headers = new HttpHeaders().set( 'Authorization', `Bearer ${this.authService.authToken}` ); formValue.nor_id = this.authService.getNorId(); return this.http.post(`${this.apiUrl}/recipe/network`, formValue, { headers }); } }