How to disable caching with HttpClient get in Angular 6

Question

I'm writing an Angular SPA app, that uses HttpClient to get values from my backend.

What is the easy way to tell it not to cache? The first time I ask it gets the value, then it refuses to make subsequent queries.

Thanks, Gerry

Answer 1

Using meta HTML tags, Disable browser caching:-

<meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0"> <meta http-equiv="expires" content="0"> <meta http-equiv="pragma" content="no-cache"> 

or,

Add headers in http request as:-

headers = new Headers({         'Cache-Control':  'no-cache, no-store, must-revalidate, post-                              check=0, pre-check=0',         'Pragma': 'no-cache',         'Expires': '0'     }); 

Answer 2

HTTPInterceptors are great way to modify HTTP requests occurring in your application. It acts as an injectable service that can invoke when HttpRequest occurs.

HTTP Interceptor:

import { Injectable } from '@angular/core'; import { HttpInterceptor, HttpRequest, HttpHandler, HttpHeaders } from '@angular/common/http';  @Injectable() export class CacheInterceptor implements HttpInterceptor {    intercept(req: HttpRequest<any>, next: HttpHandler) {     const httpRequest = req.clone({       headers: new HttpHeaders({         'Cache-Control': 'no-cache',         'Pragma': 'no-cache',         'Expires': 'Sat, 01 Jan 2000 00:00:00 GMT'       })     });      return next.handle(httpRequest);   } } 

Using Interceptor:

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms';  import { AppComponent } from './app.component';  import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'; import { CacheInterceptor } from './http-interceptors/cache-interceptor';  @NgModule({   imports:      [ BrowserModule, FormsModule ],   declarations: [ AppComponent ],   bootstrap:    [ AppComponent ],   providers: [     { provide: HTTP_INTERCEPTORS, useClass: CacheInterceptor, multi: true }   ] }) export class AppModule { }