Define Global Angular Constants

In Angular with TypeScript, there are several ways to define constants like an API base URL without repeating it in all services.

1. Using Global Constants File (For Angular 2+)

This approach involves creating a simple constant file and exporting the base URL from there.

Steps:
1. Create a constants file, e.g., src/app/constants.ts
export const API_ENDPOINT = 'http://127.0.0.1:6666/api/';

2. Import in service and use it,

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { API_ENDPOINT } from '../constants';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private baseUrl = API_ENDPOINT;
  constructor(private http: HttpClient) {}
  getData() {
    return this.http.get(`${this.baseUrl}/data`);
  }
}

2. Using Environment Files (For Angular 2+)

Angular provides environment files to manage different configurations for development and production environments. So, we can store constants like the API base URL in these files.

Steps:
1. Define the API URL in the src/environments/environment.ts
(for development):

export const environment = {
  production: false,
  API_ENDPOINT: 'http://127.0.0.1:6666/api/'
};

2. In the src/environments/environment.prod.ts (for production):

export const environment = {
  production: true,
  API_ENDPOINT: 'https://your-production-url.com/api/'
};

3. Import the environment object in your services:

import { environment } from '../environments/environment';
@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private baseUrl = environment.API_ENDPOINT;
  constructor(private http: HttpClient) {}
  getData() {
    return this.http.get(`${this.baseUrl}/data`);
  }
}

This approach makes it easier to switch between environments (development, staging, production) without modifying the code. For multiple deployment platforms, you can extend this by adding additional environment files (e.g., environment.staging.ts for staging) and handling different API URLs in each file.

3. Using a Constant Service or Injection Token (For Angular 4+)

This method leverages Angular’s InjectionToken, which allows you to inject values (like an API URL) across services. It is a good approach for large applications or when you need flexibility in managing constants via Angular’s DI system.

Steps:
1. Define the InjectionToken for the API base URL:

import { InjectionToken } from '@angular/core';
export const API_ENDPOINT = new InjectionToken('API_ENDPOINT');

2. Provide value in app.module.ts

import { API_ENDPOINT } from './constants/api.constants';
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    { provide: API_ENDPOINT, 
      useValue: 'http://127.0.0.1:6666/api/' 
    }],
  bootstrap: [AppComponent]
})
export class AppModule {}

3. Inject it into service

import { Inject, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { API_ENDPOINT } from './constants/api.constants';
@Injectable({
  providedIn: 'root'
})
export class ApiService {
  constructor(
    private http: HttpClient,
    @Inject(API_ENDPOINT) private baseUrl: string
  ) {}

  getData() {
    return this.http.get(`${this.baseUrl}/data`);
  }
}

For multiple environments, such as development, staging, and production, you can modify the app.module.ts to provide different API URLs dynamically based on the environment:

import { API_ENDPOINT } from './constants/api.constants';
import { environment } from '../environments/environment';
@NgModule({
  providers: [
    { provide: API_ENDPOINT, useValue: environment.API_ENDPOINT }
  ]
})
export class AppModule {}