Xoá Cache browser với Angular 2+ (Ví dụ: cache image)

 

// Cách 1: Cache-busting hashing mode. (-oh , --outputHashing)

ng build --aot --output-hashing=all

--output-hashing=none|all|media|bundles

--output-hashing all — hash

// Cách 2:

<meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">

<meta http-equiv="Pragma" content="no-cache">

// Cách 3: https://www.imperva.com/learn/performance/cache-control/

@Injectable()

export class CacheInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest, next: HttpHandler): Observable<HttpEvent> {

        if (req.method === "GET") {

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

        }

        return next.handle(req);

    }

}

// Cách 4:

@Component({

    selector: 'app-component',

    templateUrl: `./app/component.html?v=${new Date().getTime()}`,

    styleUrls: [`./app/component.css?v=${new Date().getTime()}`]

})

new Date().toISOString() //2016-09-24T00:43:21.584Z

new Date().toISOString().substr(0, 10) //2016-09-24 Hoặc khi deploy thêm params ?v==build-id ở các file bunder

// Cách 5: Đừng quên cài đặt no-cache cho nginx