Force JavaScript file version update

Question:

I'm developing an application in Angular2 and I'm facing a problem which is updating the JS files. When I update the version sometimes the browser doesn't load the new file, it uses the old one. I know if you put the file version at the end of the reference, like:

nomedoarquivo.js?v=1 works.

The problem is that in Angular2 the js files are not referenced directly in index.html as in Angular JS 1, the JS files are loaded via SystemJS . Does anyone know a way to force it to always load the new JS , or version the JS using SystemJS ?

Answer:

I believe this issue in SystemJS is known: I found an issue in discussion on GitHub

In this Issue there is a possible WorkAround: a Gulp plugin called systemjs-cachebuster. If you're using Gulp, maybe it's a simple solution.

I also suggest that you evaluate lite-server . When I tested Angular2, I used the lite-server and I don't remember having run into problems with cache and even hot-reloading helps a lot with the feedback loop.

Installing lite-server in your project is simple using NPM:

npm install lite-server --save-dev

In your package.json simply adjust the "start" script or one of your own.

"scripts": {
  "lite": "lite-server",  
},

Run with an npm run:

npm run lite

If you are using TypeScript, simply keep the compiler on –watch and the lite-server will identify new versions of the Js files.

Scroll to Top