Prevent IE11 caching GET call in Angular 2

Question

I have a rest endpoint that returns a list on a GET call. I also have a POST endpoint to add new items and a DELETE to remove them. This works in Firefox and Chrome, and the POST and DELETE work in IE11. However, the GET in IE11 only works on initial load of the page. Refreshing returns cached data. I have seen post about this behavior in Angular 1 but nothing for Angular 2(release candidate 1).

Answer 1

For Angular 2 and newer, the easiest way to add no-cache headers by overriding RequestOptions:

import { Injectable } from '@angular/core'; import { BaseRequestOptions, Headers } from '@angular/http';  @Injectable() export class CustomRequestOptions extends BaseRequestOptions {     headers = new Headers({         'Cache-Control': 'no-cache',         'Pragma': 'no-cache',         'Expires': 'Sat, 01 Jan 2000 00:00:00 GMT'     }); } 

Module:

@NgModule({     ...     providers: [         ...         { provide: RequestOptions, useClass: CustomRequestOptions }     ] }) 

Answer 2

Today, I also had this problem, (damn IE). In my project, I use httpclient, that hasn't BaseRequestOptions. We should use Http_Interceptor to resolve it!

import { HttpHandler,     HttpProgressEvent,     HttpInterceptor,     HttpSentEvent,     HttpHeaderResponse,     HttpUserEvent,     HttpRequest,     HttpResponse } from '@angular/common/http'; import { Observable } from 'rxjs/Observable';  export class CustomHttpInterceptorService implements HttpInterceptor {     intercept(req: HttpRequest<any>, next: HttpHandler):       Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any>> {       const nextReq = req.clone({         headers: req.headers.set('Cache-Control', 'no-cache')           .set('Pragma', 'no-cache')           .set('Expires', 'Sat, 01 Jan 2000 00:00:00 GMT')           .set('If-Modified-Since', '0')       });        return next.handle(nextReq);   } } 

Module provide

@NgModule({     ...     providers: [         ...         { provide: HTTP_INTERCEPTORS, useClass: CustomHttpInterceptorService, multi: true }     ] })