Reading JSON file from Asset folder time delay

Issue

I have created a JSON file inside the wwwroot/assets directory in my Angular app so if I need to change something on a production server, I do not need to rebuild the app.

So when I change said file locally i.e. developing on localhost using Node.js, the changes correctly appear when I reload the site from the browser. However, when doing this on Azure, the changes do not appear straight away and it takes a while for the changes to appear (I haven't timed it, but let's say it more than 10 mins). I believe the problem is that Azure and the app service might be caching the file.

For instance, when I change a string or object inside the wwwroot/assets/config.json the changes are instant. So I was surprised when my JSON file reload isn't.

Some code for context

In my Angular Component

public jsonLocation: string = '../../../../../../assets/thefile.json';

this.http.get(this.jsonLocation).subscribe((res: any) => {
  // display contents of file once GET request has responded with data 
});

This subscribe hits every time the app is loaded. So on ngOnInit essentially.

Solution

This noCacheheaders static method will go into a config service.ts file of some sort, and use this method inside the headers object inside the HTTP requests as seen below.

private readonly NoCacheHeaders: { [name: string]: string } = {
       'Cache-Control': 'no-cache, no-store, must-revalidate, post-check=0, pre-check=0',
        Pragma: 'no-cache',
        Expires: '0',
};


this.http.get(this.jsonLocation, { headers: new HttpHeaders(this.NoCacheHeaders) }).subscribe((res: any) => {
  // display contents of file once GET request has responded with data 
});

Answered By - user3428422