CODEWITHSUNDEEP
javascriptcssangularcache-control
Onur Dikmen
Onur Dikmen

Reputation: 367

How do I clear end user's cache for Angular 7

My problem is end-user browser cache issue in Angular 7. I do not have such a problem in the local environment, but when I send the package in the azure environment, the end users do not receive the updated js, css packages.

I tried many methods, some problems are fixed when I do ctrl+F5, but sometimes it doesn't go away fixed without clearing the browser cache.

Some changes I made and tried below,

  1. I changed its settings for angular.json production as follows.
"production": {
   "fileReplacements": [
       {
           "replace": "src/environments/environment.ts",
           "with": "src/environments/environment.prod.ts"
       }
   ],
   "scripts": [],
   "optimization": true,
   "outputHashing": "all",
   "sourceMap": false,
   "extractCss": true,
   "namedChunks": false,
   "aot": true,
   "extractLicenses": true,
   "vendorChunk": false,
   "buildOptimizer": true,
   "budgets": [
       {
           "type": "initial",
           "maximumWarning": "5mb",
           "maximumError": "10mb"
       }
   ]
}

2 I used the below command for angular package creation in azure devops ng build --configuration production --output-hashing all

enter image description here

Lastly, I added cache-control to the header field as below, but this creates a problem for json posts.

    headers.append('Cache-Control', 'no-cache');
    headers.append('Pragma', 'no-cache');

What I want is to ensure that the end user receives the most recently created package when a new package is released.

browser cache store

enter image description here

The config settings on the Azure side are as follows.

web.config

<system.webServer>
  <staticContent>
    <clientCache cacheControlMode="DisableCache" cacheControlMaxAge="0.00:00:00" />
  </staticContent>
    <httpProtocol>
        <customHeaders>
            <add name="Cache-Control" value="no-cache, no-store, must-revalidate" />
            <add name="Pragma" value="no-cache" />
            <add name="Expires" value="-1" />
        </customHeaders>
    </httpProtocol>  
</system.webServer>

index.html meta tag

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">

Upvotes: 0

Views: 3432

Answers (2)

Onur Dikmen
Onur Dikmen

Reputation: 367

Thanks for your help. We solved the problem as below, the problem was occurring due to an incorrect meta tag setting in index.html.

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="cache-control" content="max-age=0">

The old index.html meta tag is as follows. (wrong use meta tag attribute)

<meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0">

http Cache-Control

n theory, if directives are conflicted, the most restrictive directive should be honored. So the example below is basically meaningless because private, no-cache, max-age=0 and must-revalidate conflict with no-store.

conflicted Cache-Control: private, no-cache, no-store, max-age=0, must-revalidate

equivalent to Cache-Control: no-store

Upvotes: 1

Bellash
Bellash

Reputation: 8184

In Statup class, aspnet.core I usually call an override method for the static files middleware like this

    var staticFileoptions = new StaticFileOptions
        {
            OnPrepareResponse = (context) =>
            {
                context.Context.Response.Headers.Add("Cache-Control", "no-cache, no-store");
                context.Context.Response.Headers["Pragma"] = "no-cache";
                context.Context.Response.Headers.Add("Expires", "-1");
            }
        };
        app.UseStaticFiles(staticFileoptions);

Upvotes: 0

Related Questions