Angular 4 Reads from cache in IE

Question

I am trying to run my front-end on IE 11, well this problem seems to happen only on IE cuz in Chrome I dont have it. anyway I dont want each time to clear my browser cache to read back from DB. I tried to add interpreter:

myModule.config(['$httpProvider', function($httpProvider) {
if (!$httpProvider.defaults.headers.common) {
    $httpProvider.defaults.headers.common = {};
}
$httpProvider.defaults.headers.common["Cache-Control"] = "no-cache";
$httpProvider.defaults.headers.common.Pragma = "no-cache";
$httpProvider.defaults.headers.common["If-Modified-Since"] = "0";
}]);

and it didn't work . Beside that I tried to follow the Injectable

 @Injectable()
export class NoCacheHttp extends Http {
constructor(backend: XHRBackend, options: RequestOptions) {
    super(backend, options);
}

get(url: string, options?: RequestOptionsArgs): Observable<Response> {
    //make options object if none.
    if (!options) {
        options = { params: new URLSearchParams() };
    }
    //for each possible params type, append a random number to query to 
 force no browser caching.
    //if string
    if (typeof options.params === 'string') {
        let params = new URLSearchParams(options.params);
        params.set("k", new Date().getTime().toString());
        options.params = params;

    //if URLSearchParams
    } else if (options.params instanceof URLSearchParams) {
        let params = <URLSearchParams>options.params;
        params.set("k", new Date().getTime().toString());

    //if plain object.
    } else {
        let params = options.params;
        params["k"] = new Date().getTime().toString();
    }
    return super.get(url, options);
 }
}

It's like that I don't know how to add it or it might be not useful.!!! Prevent IE11 caching GET call in Angular 2 But I don't know how to register the class or use it "I knew about Angular yesterday"

Uhm, but, I noticed that the first code exempt looks like angularjs (1.x version), but the second is clearly Angular 2+. How is that possible? — Armen Vardanyan, Nov 23 '17 at 08:13

score 1 · Answer 1 · answered Mar 28 '18 at 21:44

When you use HttpHeaders instead of Headers because of HttpClient in newer versions of Angular it works for me with the following example

let headers = new HttpHeaders({
  'Cache-Control': 'no-cache',
  'Pragma': 'no-cache',
  'Expires': 'Sat, 01 Jan 2000 00:00:00 GMT'
})
return this.http.get('my url', {headers:headers})

score 0 · Answer 2 · answered Nov 23 '17 at 08:11

0

You have to disable caching manually by setting headers. I've had the sdamer problem on IE, this code solved it. Before each HTTP request to backend set the following headers:

const headers = new Headers();
headers.append('Cache-Control', 'no-cache');
headers.append('Pragma', 'no-cache');
this.http.get('my url', {headers: headers}); // make the call

answered Nov 23 '17 at 08:11

Armen Vardanyan

3,214
1
13
34

I tried it `this.http.get(this.getDropdownURL(), {headers: headers})` `import { HttpClient,HttpHeaders } from '@angular/common/http';` `import { Headers} from '@angular/http';` but i always get this error Types of property 'headers' are incompatible. Type 'Headers' is not assignable to type 'Headers'. – NFAL Nov 23 '17 at 08:39
Did you check in the `Network` tab whether the headers were correctly set? – Armen Vardanyan Nov 23 '17 at 08:40

Angular 4 Reads from cache in IE

2 Answers2