typescript 38 lines · 6 steps

Caching HTTP config in an Angular service

An injectable service fetches app config once and shares the result across every subscriber using shareReplay.

Explained by highlit

Angular Intermediate caching observables dependency-injection sharereplay singleton

1import { Injectable } from '@angular/core';
2import { HttpClient } from '@angular/common/http';
3import { Observable, shareReplay } from 'rxjs';
4 
5export interface AppConfig {
6  featureFlags: Record<string, boolean>;
7  apiBaseUrl: string;
8  supportEmail: string;
9}
10 
11@Injectable({ providedIn: 'root' })
12export class ConfigService {
13  private config$?: Observable<AppConfig>;
14 
15  constructor(private http: HttpClient) {}
16 
17  getConfig(): Observable<AppConfig> {
18    if (!this.config$) {
19      this.config$ = this.http.get<AppConfig>('/api/config').pipe(
20        shareReplay({ bufferSize: 1, refCount: false }),
21      );
22    }
23    return this.config$;
24  }
25 
26  isFeatureEnabled(flag: string): Observable<boolean> {
27    return this.getConfig().pipe(
28      map((config) => config.featureFlags[flag] ?? false),
29    );
30  }
31 
32  refresh(): Observable<AppConfig> {
33    this.config$ = undefined;
34    return this.getConfig();
35  }
36}
37 
38import { map } from 'rxjs';

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1A cached Observable field lets a service fetch once and replay the result to every later subscriber.
2shareReplay with bufferSize 1 and refCount false keeps the response alive even when no one is currently subscribed.
3Nulling the cached Observable is a clean way to force a fresh fetch on the next access.

Related explainers

typescript

import {
  CallHandler,
  ExecutionContext,
  Injectable,

Wrapping responses in a NestJS interceptor

interceptors rxjs response-shaping

Intermediate 7 steps

typescript

type RetryOptions = {
  retries?: number;
  timeoutMs?: number;
  baseDelayMs?: number;

Retry with timeout and backoff in TypeScript

promises retry exponential-backoff

Intermediate 10 steps

typescript

import { Pipe, PipeTransform, ChangeDetectorRef, NgZone, OnDestroy } from '@angular/core';
 
@Pipe({
  name: 'timeAgo',

A self-refreshing timeAgo pipe in Angular

impure-pipe change-detection timers

Advanced 10 steps

typescript

const DIVISIONS: { amount: number; unit: Intl.RelativeTimeFormatUnit }[] = [
  { amount: 60, unit: "seconds" },
  { amount: 60, unit: "minutes" },
  { amount: 24, unit: "hours" },

Human-readable relative times with Intl

internationalization date-formatting lookup-table

Intermediate 7 steps

rust

use std::collections::HashMap;
 
pub struct Memoizer<K, V, F> {
    cache: HashMap<K, V>,

A generic memoizer in Rust

memoization generics caching

Intermediate 6 steps

typescript

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { AsyncPipe } from '@angular/common';