Htykuut

You could do this dynamically from javascript.

<script>

var my_awesome_script = document.createElement('script');

my_awesome_script.setAttribute('src', '/assets/abc.js?v='+new Date.getTime()); //was missing single quote

document.head.appendChild(my_awesome_script);

</script>

taken from
Stack overflow answer

<script [src]="'/assets/abc.js?v='+new Date.getTime();" type="text/javascript"></script>

if its not working try to create model and do it like this:

this.someModel = "/assets/abc.js?v='"+new Date.getTime();

<script [src]="script" type="text/javascript"></script>

there are also more ways to do it.

From all the testing I have done it seems that the final attempt that you tried works flawlessly when using [0] instead of [6] or any other value for that matter. Also why do you have multiple head tags? was this a typo and you meant header? it seems to work with any number of headers.

But really this type of thing should be handled via backend if possible.

It seems that you are confused with html & javascript.

It's impossible to use html which is mixed up with javascript to archive something.

With SSR(Server Side Render)

Using such as Handlebars or another template engine.

The timestamp(as well as your version tag) should be rendered in server side before html was generated.

<script src="/assets/abc.js?v='+new Date.getTime();" type="text/javascript"></script>



<link href="/assets/cder.css?v='+new Date.getTime();"  rel="stylesheet"></link>

Without SSR(Server Side Render)

We can archive with javascript after html is returned by HTTP request.

let script = document.createElement('script');



script.setAttribute('src', `somefile?v=${Date.now()}`);



document.head.appendChild(script);

It's better to wrap a function to do this job.

Your script is not loading because its not new Date.getTime() but new Date().getTime() or just use Date.now(). Additionally To prevent browser cache you can add no-cache header for example using .htaccess

<filesMatch ".(js|css)">

  FileETag None

  <ifModule mod_headers.c>

     Header unset ETag

     Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"

     Header set Pragma "no-cache"

     Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"

  </ifModule>

</filesMatch>



<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType text/javascript "access plus 1 seconds"

ExpiresByType text/css "access plus 1 seconds"

</IfModule>

and for javascript function

function appendJS(url) {

  var s = document.createElement('script');

  s.src = url + '?v=' + Date.now();

  document.body.appendChild(s);

}



function appendCSS(url) {

  var s = document.createElement('link');

  s.rel = 'stylesheet';

  s.href = url + '?v=' + Date.now();

  document.body.appendChild(s);

}

appendJS('/assets/abc.js');

appendCSS('/assets/cder.css');

While other answers here correctly describe how to do this in a script, I want to note three things:

1. You should do this at build-time using hashes, not timestamps, otherwise, every time the date changes your cache could be cleared. That's not a great user experience. Be intentional about when and why you're fetching this. Webpack has a nifty build plugin for creating hashes in file names.


2. Use headers to drive whether a new file should be fetched.


3. Make sure you're setting the async attribute on any run-time <script> element, otherwise it degrades performance, sometimes significantly. Search engines penalize this heavily.

```

```

But note that appending a script tag regardless of using the async attribute will block rendering. Read this for more details.

const time = new Date(2018, 10, 24, 22); // you can provide minutes and seconds if you want

const today = new Date();

const head = document.querySelector('html head');

const body = document.querySelector('html body'); 



const styleFile = '<link href="/assets/cder.css?v=' + today.getTime() + '"  rel="stylesheet"></link>';

const scriptFile = '<script src="/assets/abc.js?v=' + today.getTime() + '" type="text/javascript"></script>';



setInterval(() => {

  if ((time.getDate() === today.getDate()) && (time.getMonth() === today.getMonth()) && (time.getFullYear() === today.getFullYear()) && (time.getHours() === today.getHours())) {

    head.append(styleFile);

    body.append(scriptFile);

  }

}, 60000);

<html>

  <head>

    <!-- here we will append style file -->

  </head>

  <body>

    <div>some dummy text</div>

    <!-- here we will append script file -->

  </body>

</html>

why setInterval? that how we tell the browser "please check every minute if the condition true" if it's, so append new styleFile and scriptFile .

Note: you can provide minutes and seconds in time as well if you want but remember to also add the appropriate condition in if(...){}