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