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)

Paul-Alexandre Naud · Accepted Answer · 2022-11-16T13:21:10.120

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

I find the solution you propose interesting; but from what I understand what it does or what you want to do; this would solve for those who have the version in which that code is added; and from there, I would check. But what I want to solve are those who currently see the March version. — JorgeParada, Nov 15 '22 at 12:18
Indeed. In addition to the metadata in the index.html file you can also configure your HTTP server (apache?) to force remove cache https://stackoverflow.com/a/49904046/9062259 — Paul-Alexandre Naud, Nov 15 '22 at 13:36
In this case it is an nginx; but I see it as a possible solution. I will look into it, thank you very much. — JorgeParada, Nov 15 '22 at 18:24

Angular Universal Cached in Browsers

1 Answers1