angular-cache-http-interceptor.ts

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpResponse } from '@angular/common/http';
import { CacheService } from '../services/cache.service';
import { of } from 'rxjs';
import { tap } from 'rxjs/operators';

@Injectable()
export class CacheHttpInterceptor implements HttpInterceptor {
    constructor(private cache: CacheService) { }

    intercept(req: HttpRequest<any>, next: HttpHandler) {
        if (!this.isRequestCachable(req)) {
            return next.handle(req);
        }
        // check for cache request
        const cachedResponse = this.cache.get(req);
        if (cachedResponse !== null) {
            return of(cachedResponse);
        }
        return next.handle(req).pipe(
            tap(event => {
                if (event instanceof HttpResponse) {
                    this.cache.set(req, event);
                }
            })
        );
    }

    private isRequestCachable(req: HttpRequest<any>) {
        return (req.method === 'GET');
    }
}

angular-cache-service.ts

import { Injectable } from '@angular/core';
import { HttpResponse, HttpRequest } from '@angular/common/http';

export interface CacheEntry {
  url: string;
  response: HttpResponse<any>
}

@Injectable()
export class CacheService {
  constructor() { }

  cacheMap = new Map<string, CacheEntry>();

  get(req: HttpRequest<any>): HttpResponse<any> | null {
    const entry = this.cacheMap.get(req.urlWithParams);
    if (!entry) {
      return null;
    }
    return entry.response;
  }

  set(req: HttpRequest<any>, res: HttpResponse<any>): void {
    const entry: CacheEntry = { url: req.urlWithParams, response: res };
    this.cacheMap.set(req.urlWithParams, entry);
  }

  clear() {
    this.cacheMap.clear();
  }
}