Angular 2 browser cache cleaning issue

The best way to avoid browser's cache issue is appending a string to the JavaScript/HTML/CSS links.

Usually I will append a version number to reload all updated source code. For example,

<script src="app.js?v=1.0"></script>

or

@Component({
selector: 'csj-app',
templateUrl: 'app/component/app.comp.html?v=1.0',
styleUrls: ['style/app.css?v=1.0']
})

However, we do not want to change the version number one by one manually every time when the source code is updated. It is better we only change one place and all the version numbers are updated automatically.

Here comes my solution. Since my Angular 2 app modules are loaded using SystemJS. I set a version number in the file "systemjs.config.js", and then appended the version number to all JavaScript/HTML/CSS files' loading paths.

My "systemjs.config.js" looks like:

(function (global) {

System.appVersion = '1.0'; /// user defined version of current app
System.config({

paths: { ... },

// packages tells the System loader how to load when no filename and/or no extension
packages: {

app: {
main: './main',
defaultExtension: 'js?v=' + System.appVersion
},

...

}

});

})(this);

We also need to adopt the version number in all component files, such as:

@Component({

selector: 'csj-app',
templateUrl: 'app/component/app.comp.html?v=' + System.appVersion,
styleUrls: ['style/app.css?v=' + System.appVersion]

})

When you make any change to your app, you only need to update "System.appVersion" in "systemjs.config.js". You browser will reload all the source code from the server, not the browser's cache. Users do not have to clear browser's cache in order to see updates.

Genhan Chen

Angular 2 browser cache cleaning issue

Related articles