Angular Ie Caching Issue for $Http

Prevent IE11 caching GET call in Angular 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 }
    ]
})

Angular IE Caching issue for $http

Instead of disabling caching for each single GET-request, I disable it globally in the $httpProvider:

myModule.config(['$httpProvider', function($httpProvider) {
    //initialize get if not there
    if (!$httpProvider.defaults.headers.get) {
        $httpProvider.defaults.headers.get = {};    
    }    

    // Answer edited to include suggestions from comments
    // because previous version of code introduced browser-related errors

    //disable IE ajax request caching
    $httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
    // extra
    $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
    $httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
}]);

Better Way to Prevent IE Cache in AngularJS?

As binarygiant requested I am posting my comment as an answer. I have solved this problem by adding No-Cache headers to the response on server side. Note that you have to do this for GET requests only, other requests seems to work fine.

binarygiant posted how you can do this on node/express. You can do it in ASP.NET MVC like this:

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "None")]
public ActionResult Get()
{
    // return your response
}

Caching issue with Angular templates

After some more research I found even better solution. '$templateCache.removeAll()' actually does work, except that templates are still kept somewhere and to make sure they are updated I need to reload current state:

  $templateCache.removeAll();
  $state.transitionTo($state.current, $stateParams, {
    reload: true,
    inherit: false,
    notify: true
  });

This way I do not need to turn off the cache completely, but can just wipe it out whenever a user is logged in or out.

Caching issue in angularJS application

Unless you state it, angular will not cache your $http requests, so most likely the values are being cached by your server.

There are a couple of things you can do:

1. Pass a header to the server to ignore the cache (assuming your server will react to that header appropriately)
2. Add a random parameter to your $http request so that the server interprets your request as a new one

Answers number 1 and 2 on this question: Angular IE Caching issue for $http

Angular Proper way to cache or load http requests

1. You could probably customise the HTTP provider to look for certain paths and cache them for your application. But I think coding the specific calls you want cached by specifying cache=true is better and clearer?

2. I think you have understood it correctly.

https://docs.angularjs.org/api/ng/service/$http

"When caching is enabled, $http stores the response from the server using the relevant cache object. The next time the same request is made, the response is returned from the cache without sending a request to the server."

So if you repeatedly make requests to /wp-json/menus/2 within the scope of an instance of your angular SPA, it will not hit the server. Its quite efficient.

I hope this helps.

Disabling AngularJS $http cache

This is already answered here.

Pasting code snippet from the link for your reference.

myModule.config(['$httpProvider', function($httpProvider) {
    //initialize get if not there
    if (!$httpProvider.defaults.headers.get) {
        $httpProvider.defaults.headers.get = {};    
    }    

    // Answer edited to include suggestions from comments
    // because previous version of code introduced browser-related errors

    //disable IE ajax request caching
    $httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
    // extra
    $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
    $httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
}]);

---

Related Topics