How to disable caching with HttpClient get in Angular 6

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'    });

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 { }

As answered by Pramod, you can use http request interceptor to modify or set a new header on the request.Below is a much simpler way of setting headers on http request interceptor for Later angular versions(Angular 4+). This approach would only set or update a certain request header. This is to avoid removing or overriding some important headers like the authorization header.

// cache-interceptor.service.tsimport { Injectable } from '@angular/core';import {  HttpInterceptor,  HttpRequest,  HttpHandler,} from '@angular/common/http';@Injectable()export class CacheInterceptor implements HttpInterceptor {  intercept(req: HttpRequest<any>, next: HttpHandler) {    const httpRequest = req.clone({      headers: req.headers        .set('Cache-Control', 'no-cache')        .set('Pragma', 'no-cache')        .set('Expires', 'Sat, 01 Jan 2000 00:00:00 GMT')    })    return next.handle(httpRequest)  }}// app.module.ts  import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'  import { CacheInterceptor } from './cache-interceptor.service';  // on providers  providers: [{ provide: HTTP_INTERCEPTORS, useClass: CacheInterceptor, multi: true }]