Opening IE 11 dev tool causing the issue

Question

I work on Angular 4, I have a language list and each list has a star beside it. As soon as the user clicks on star the language is added to favourites.

Issue: Ones I click on star the language appears to be added to the favourite list but when I refresh the page the previously selected favourite is not reflected (call to database doesnot goes, changes does not get reflected to database).

Bigger Issue: When I open the dev tool of IE and add a language to favourites, it shows in the favourites panel and if the refresh the page then also the previously selected favourite is present there (database is called and changes are reflected to database).

So, if the IE dev tool is open there is no issue and everthing works fine, when I close the dev tool the favourite added or deleted list doesnot appears on page load. There is no error in the console (except SockJS reconnect and I dont know what this is, we are not using SockJS). How am I suppose to debug this issue? What can the problem be when the dev tool is closed?

Answer 1

you have to prevent cache for get requests, internet explorer get data from cache when you trigger a get a request. you have to add no-cache in your header.

const apiHeaders = new HttpHeaders({ 'Content-Type': 'application/json',
 'Cache-control': 'no-cache, no-store, must-revalidate',
 'Pragma': 'no-cache',
 'Expires': '-1'
});
...

return this.http.get(uri, { headers: apiHeaders})