Angular 2 html template cache busting

[Andy Macdonald]

Hay guys,

So I've taken the plunge and started using Angular 2 but there is a slight issue where templates are falling stale due to being stored in browser cache etc!!

I know I can create a gulp task to inject a buster query string or even inline my html files, but was wondering if there is solution that just requires marking the url with some special parameters that Angular's template loader picks up on.. or can I hook into the template load (how?) and append a query string (?v=233 for example) 

Cheers guys!

[Sander Elias]

Hi Andy,

This is a bit depending on your server. The most supported way al around seems indeed append a query string.
You can use this one to set it to one day, or an hour, or even 10 minutes, by amending the length.

 `${url}?v=${new Date().toISOString().slice(0,13)}`

(sample is using the ES6 template strings. you can use that natively in all browsers that have official angular support)

Regards
Sander

​

[Andy Macdonald]

OK... that's cool and thanks for the info on ES6 template strings... 

Regarding those there template strings, can I just inject that into the following component decorator?

@Component({

    selector: 'login',

    templateUrl: '/app/login/login.html'

})

[Sander Elias]

Hi Andy,

Yes you can, but it will not change anymore after your component get's initialized. If your app runs longer as you want to keep those in memory, you might need to do a forced page-reload every now and then.

Regards

Sander 

[Martin Wawrusch]

You probably want to inject something like this into your build process:

https://github.com/ludohenin/gulp-inline-ng2-template