Typed Angular Environment

typed-environment-config.ts

/***********************
 *    app-config.ts    *
 ***********************/

import { InjectionToken } from '@angular/core'

export interface AppConfig {
    production: boolean
    apiURL: string
}

export const APP_CONFIG = new InjectionToken<AppConfig>('app.config')


/***********************
 *    app.module.ts    *
 ***********************/
  
import { HttpClientModule } from '@angular/common/http'
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RouterModule } from '@angular/router'
import { APP_CONFIG, AppConfig } from '@core/config/app-config'
import { environment } from '@environment/environment'
import { AppRoutingModule } from './app-routing.module'
import { AppComponent } from './app.component'

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, RouterModule, HttpClientModule, AppRoutingModule],
    bootstrap: [AppComponent],
    providers: [
        { provide: APP_CONFIG, useValue: environment },
    ],
})
export class AppModule {}



/**********************
 *        Usage       *
 *  asset.service.ts  *
 **********************/

import { HttpClient } from '@angular/common/http'
import { Inject, Injectable } from '@angular/core'
import { AppConfig, APP_CONFIG } from '@core/config/app-config'
import { Asset } from '@features/asset/interfaces'
import { Observable } from 'rxjs'

@Injectable({
    providedIn: 'root',
})
export class AssetService {
    private endpoint: string

    constructor(
        private http: HttpClient, 
        @Inject(APP_CONFIG) appConfig: AppConfig,
    ) {
        this.endpoint = appConfig.apiURL + '/assets'
    }

    findById(id: string): Observable<Asset> {
        return this.http.get<Asset>(`${this.endpoint}/${id}`)
    }

    delete(id: string): Observable<Asset> {
        return this.http.delete(`${this.endpoint}/${id}`)
    }
}