Angular Universal Cached in Browsers

Question

Using Angular (v12) with Universal I have a website that has cached in some browsers an old version of angular, so you see old versions in some cases.

I can't force the browser to clear the cache in all cases because it's a public website. So some things have been added to "force it". But it is not working and there are browsers that are still showing an older version of it.

In the index.html has been added:

 <meta http-equiv="Expires" content="0">
  <meta http-equiv="Last-Modified" content="0">
  <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
  <meta http-equiv="Pragma" content="no-cache">
  <meta name="Revisit" content="10 days">

And after compiling, manually modified the angular.js to add a date as a parameter in the style "main.js?t=20221115".

Any ideas or guidance on how to force all browsers to load the new version? I say this because in some cases they are still showing the March version.

Thanks for your time.

Translated with www.DeepL.com/Translator (free version)

Answer 1

I had the same problem. To check if the site is up to date, I request a "version" file (file?t=) and I compare it with the version in the "environment" file. If the version is not the same, I display a popup with a reload button

I generate the version in the "environment" and "version" file before the build

package.json

"scripts": { 
"build": "yarn run build:browser && yarn run build:server",
"build:browser": "yarn versionning && ng build --configuration=production",
"build:server": "ng run website:server --configuration=production",
"versionning": "node replace-version.js"
}

replace-version.js

var fs = require('fs')
var version =  Math.floor(Math.random()*100000000);
console.log('version',  version)
fs.readFile('src/environments/environment.prod.ts', 'utf8', function (err,data) {
  if (err) { return console.log(err);}
  var result = data.replace(/version\s*:.*/, 'version : ' + version);
  fs.writeFile('src/environments/environment.prod.ts', result, 'utf8', function (err) {
    if (err) return console.log(err);
  });
});


fs.writeFile('src/assets/version.json', '{ "version" : '+version+' }' , 'utf8', function (err) {
  if (err) return console.log(err);
});

environment.prod.ts

export const environment = {
  production: true,
  versionFile: 'assets/version.json',
  version : 60065676
};

assets/version.json

{ "version" : 60065676 }

When loading the site (in the app.component) I call checkVersion()

this.versionService.checkVersion(environment.versionFile, environment.version, environment.production)

version.service.ts

import {HttpClient} from '@angular/common/http';
import { Inject, Injectable, PLATFORM_ID} from '@angular/core';
import {isPlatformBrowser} from '@angular/common';

@Injectable({  providedIn: 'root' })
export abstract class VersionService {
  constructor(  @Inject(PLATFORM_ID) private platformId: Object, private http: HttpClient) {}
  
  public checkVersion(url, version, prod) {
    if (isPlatformBrowser(this.platformId) && prod) {
      this.http.get(url + '?t=' + new Date().getTime()).subscribe(
        (response: any) => {
          const hashChanged = response.version && version !== response.version;
          if (hashChanged) {
            this.showPopupNewVersion();
          }
        },
        (err) => {
          console.error(err, 'Could not get version');
        }
      );
    }
  }
  
  showPopupNewVersion(){
     // SHOW alert or Popup or snackbar to warn the user
     // Exec  window.location.reload(); after XXXsec or user click
     }  
}

It works fine for me in case an old version is displayed because of the cache. Hope this answers your question