Skip to main content

​
ApiConfigService

The ApiConfigService provides centralized configuration management for API endpoints and feature flags. It reads configuration from Angular environment files and exposes them through a type-safe interface.

​
Overview

This core service acts as a single source of truth for API configuration throughout the application. It encapsulates environment-specific settings and provides a clean interface for accessing the backend API base URL.
The service reads from Angular’s environment object, which switches between environment.ts (development) and environment.production.ts (production) during the build process.

​
Service API

​
Provided In

@Injectable({ providedIn: 'root' })
The service is provided at the root level and available as a singleton.

​
Public Properties

​
apiBaseUrl
string (getter)
Returns the base URL for all API requestsExample values:
  • Development: http://localhost:8080/api
  • Production: https://api.airtracker.example.com

​
Configuration Interface

ApiConfig interface
export interface ApiConfig {
  apiBaseUrl: string;
  features: {
    enableFavorites: boolean;
    enableStats: boolean;
  };
  production: boolean;
}

​
Configuration Properties

​
apiBaseUrl
string
Base URL for backend API requests
​
features
object
Feature flags for enabling/disabling application features
​
production
boolean
Indicates whether the app is running in production mode

​
Usage Examples

​
Accessing API Base URL

FlightsApiService usage
import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ApiConfigService } from '../../../core/services/api-config.service';

@Injectable({ providedIn: 'root' })
export class FlightsApiService {
  private readonly http = inject(HttpClient);
  private readonly apiConfig = inject(ApiConfigService);
  
  private readonly baseUrl = this.apiConfig.apiBaseUrl;
  
  getLiveFlights() {
    return this.http.get(`${this.baseUrl}/flights/live`);
  }
}

​
Environment Configuration

The service reads from environment files:
environment.development.ts
export const environment = {
  production: false,
  apiBaseUrl: 'http://localhost:8080/api',
  features: {
    enableFavorites: false,
    enableStats: false
  }
};
environment.production.ts
export const environment = {
  production: true,
  apiBaseUrl: 'https://api.airtracker.example.com',
  features: {
    enableFavorites: true,
    enableStats: true
  }
};

​
Implementation Details

The service stores a private readonly configuration object initialized from the environment:
Internal structure
private readonly config: ApiConfig = {
  apiBaseUrl: environment.apiBaseUrl,
  features: environment.features,
  production: environment.production,
};

get apiBaseUrl(): string {
  return this.config.apiBaseUrl;
}

​
Real-World Usage

​
FlightsApiService

The API service uses ApiConfigService to construct endpoint URLs: 
private readonly baseUrl = this.apiConfig.apiBaseUrl;

getLiveFlights(): Observable<FlightResponseDto> {
  return this.http.get<FlightResponseDto>(`${this.baseUrl}/flights/live`);
}

getPhotosByIcao24(icao24: string): Observable<AircraftPhotoDto> {
  return this.http.get<AircraftPhotoDto>(`${this.baseUrl}/aircraft-photos/${icao24}`);
}

​
Configuration Management

​
Development Environment

apiBaseUrl: 'http://localhost:8080/api'
  • Points to local backend server
  • Enables development-specific debugging
  • Features may be disabled for testing

​
Production Environment

apiBaseUrl: 'https://api.airtracker.example.com'
  • Points to production API
  • Optimized builds with AOT compilation
  • All features enabled

​
Benefits

  • Centralized configuration: Single place to manage API settings
  • Type safety: ApiConfig interface prevents configuration errors
  • Environment awareness: Automatically switches between dev/prod configs
  • Easy mocking: Can be easily replaced in tests
  • Extensible: Feature flags allow gradual feature rollout

​
Future Enhancements

The features object supports future functionality:
FeatureStatusDescription
enableFavoritesPlannedSave and manage favorite flights
enableStatsPlannedView flight statistics and analytics

​
Source

~/workspace/source/src/app/core/services/api-config.service.ts

Build docs developers (and LLMs) love

Get started for freeTalk to us