I am trying to cache my angularjs application's html files, following this suggestion: https://gist.github.com/ProLoser/6181026.
I am appending a dynamic cache key like ?v=123456790 to all html files (except those in the templates directory used by angular ui bootstrap).
For partials in their own files, i.e. app/views/customer/customer-history.html this works perfectly. However, for partials in script form, e.g. <script type='text/ng-template' id='customer-history'> the template is not found and a server request is made, resulting in a 404.
E.g. localhost:8080/customer-history/?v=1234567890
I can see the templates in question are in the $templateCache. The ones using ng-template are just the name ie customer-history whereas the separate files ones are by path app/views/customer/customer-history.html as you might expect.
It's a large app so going through and moving them all to their own files etc would not be trivial. I've scoured everywhere and I'm not turning anything up so I'm guessing it's something basic with how the templateCache is implemented.
I'm using gulp-templatecache plugin during the build process but the docs are quite limited and I don't think the issue lies there.
My current solution is just to skip the offending templates for now in the function appending the version number by decorating an inCache function onto the $templateCache factory and using it during the check to append the cacheKey. But I feel this is kind of missing the point.
Answering my own question here.
Because the script tags are part of the containing html file that gets loaded into the $templateCache, the script is already there. When a request is made for the templateUrl, it shouldn't have the cache busting appendix.
The simplest way to avoid all this is to just set the cache busting hash or string on the "templates.js", or whatever the template output of the build process is. That way the entire file gets invalidated and reloaded as needed.