Angular: disable HTTP cache

Two ways to disable browser HTTP cache.

1) HTML meta tags

Append to the HEAD section. It should disable all kinds of cache.

  <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">

2) HTTP Interceptor

It controls the http comunication of HttpClientModule. So we add extra headers.

ng generate service cache-control

import { Injectable } from '@angular/core';
import {HttpHandler, HttpHeaders, HttpInterceptor, HttpRequest} from "@angular/common/http";

@Injectable({
  providedIn: 'root'
})
export class CacheControlService 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);
  }
}

Then register CacheControlService inside AppModule

//ADD
import {HTTP_INTERCEPTORS, HttpClientModule} from "@angular/common/http";
import {CacheControlService} from "./cache-control.service";


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
   // ADD
    HttpClientModule
   
  ],

  providers: [
     // ADD
    { provide: HTTP_INTERCEPTORS, useClass: CacheControlService, multi: true }
 
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}