Menu
I'm trying to implement some cache busting on my angular application in a way that it will still allow caching but break it anytime we push new code to production. My setup so far involves using grunt cache-breaker https://www.npmjs.org/package/grunt-cache-breaker to dig through my concatenated angular app.js file and append query params to any string ending in a .html file extension. I also do this for any template files I have that are using an ng-include. One complication this creates is that now I need to first copy my template files to a dist/ directory so I can safely .gitignore the cache-busted versions and not have to commit all of my templates everytime the cache is busted (and create conflicts).
My question is not how to do this but more of a sanity check as to if this is a practical way of avoiding template caching on new code? I have seen examples of disabling template caching in angular but it seems like it is something I would want to use in between code pushes when files are not changing.
How do other navigate this issue?
838
Cache busting is useful because it allows your visitors to receive the most recently updated files without having to perform a hard refresh or clear their browser cache.
First import the TemplateCompiler. import { TemplateCompiler } from 'angular2/src/compiler/template_compiler'; Next inject the TemplateCompiler in your constructor. Finally use that to clear the cache.
To prevent visitors from being served with an older, cached version of the file, which might lack some translation, you can employ a cache-busting functionality. This entails attaching a unique version identifier to the file, which ensures that a fresh version is fetched, instead of a stale, cached version.
Cache busting is a way to prevent browsers from caching your ad content. Cache busting adds a random string to your ad tag each time the tag fires — typically a random number. Because the tag has a different number each time, the browser sends a new request each time.
This entails attaching a unique version identifier to the file, which ensures that a fresh version is fetched, instead of a stale, cached version. In this article, we’ll examine two strategies to apply cache busting to our translation files, using Angular and Transloco.
In AngularJS, it is possible to use $templateCache, which is a simple key-value store for templates. The best way to use $templateCache is to integrate it into your build process, for example by using the gulp plugin gulp-angular-templatecache.
Webpack is a widely used build tool that preprocesses and bundles various application resources like .ts, .html, and .css files. For applications using Angular 2 or higher, there is a special loader, called angular2-template-loader, that inlines all template code into the corresponding angular components.
Though angular has so many things defined, still there are some things that you have to figure out on your own. “There are only two hard things in Computer Science: cache invalidation and naming things.”, Caching things is very easy but clearing the cache is difficult.
I think a popular approach is to use something like ng-templates (with a grunt plugin) to generate a JS file that pre-caches all of your templates. Then use the usemin grunt workflow along with an asset versioning task to version the JS file.
57
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
