$http cache / $cacheFactory en Angular moderno

HttpClient no tiene una opción cache. El caché es código explícito en el servicio dueño de los datos, normalmente un observable guardado con shareReplay.

Antes · AngularJS

app.factory('CountryService', function ($http, $cacheFactory) {
  var cache = $cacheFactory('countries');
  return {
    getAll: function () {
      return $http.get('/api/countries', { cache: cache });
    },
    clear: function () { cache.removeAll(); }
  };
});

Después · Angular

@Injectable({ providedIn: 'root' })
export class CountryService {
  private http = inject(HttpClient);
  private countries$?: Observable<Country[]>;

  getAll() {
    this.countries$ ??= this.http
      .get<Country[]>('/api/countries')
      .pipe(shareReplay({ bufferSize: 1, refCount: false }));
    return this.countries$;
  }

  clear() {
    this.countries$ = undefined;
  }
}

Qué cambia

shareReplay conserva la última respuesta y comparte una sola petición entre todos los suscriptores, incluidos los que llegan mientras está en curso.
Para datos indexados por id o URL, guarda un Map de observables en el servicio, o escribe un interceptor que almacene las respuestas GET.
La invalidación es código tuyo: limpia la entrada guardada después de una escritura que cambie los datos.

Consejo de migración. Lista cada endpoint que usaba cache: true y pregunta si todavía lo necesita. Los datos de referencia, como los países, normalmente sí; en otros lugares el caché ocultaba peticiones duplicadas que la nueva estructura de componentes ya no hace.

Relacionado

¿Planeas una migración o una plataforma de microfrontends?

En una llamada de 20 minutos me cuentas tu situación y te digo cómo la abordaría. Si todavía no vale la pena, también te lo digo.

Escríbeme por LinkedIn