Question posted in
Some documentation to get you started can be found here.

Best approach to reload page (not from cache) using Apache and Angular

I created Angular 6 app and hosting it using Apache on a remote server.
Created a build with ng build --prod.

I noticed that when making changes and updating an html file – the page is being loaded from a cache and not from a new version of a file that is placed in Apache folder (using default configuration in Apache and nothing in Meta tags in HTML pages yet).

How to force reloading page on a client browser but only when there is a new version of the same page? (new changes to an existing site)

What are the best practices?

Tags:

5

Answers


  1. 0

    When you build do this:

    ng build --output-hashing=all

    This should prevent changed files from caching.

    Login or Signup to reply.
  2. 0

    You can use AOT Production build, by default have hashing enabled.

    ng build --prod
    Login or Signup to reply.
  3. 0

    When using a production build ng build --prod, the cli will create a bundle with a hash value attached to each of your angular files. So if you ensure your index is not cached, it will refer to the files with the hashes. If the files have not changed, their hashes will be the same, and so it will load them from the cache. If they change, it will attempt to load the new files.

    The remaining thing is to ensure that the index.html file is not cached, and this can be done by sending the no-cache headers, or using a dynamic file (e.g. php, jsp, …) instead of *.html.

    Login or Signup to reply.
  4. 0

    I guess you are asking this question for the production environment not for development purpose.

    If this is the case, then you can check the following:

    1. index.html file is not getting updated.

    2. check what cache expiration is getting set on the browser. It must be no-cache.

    3. How are you generating the building the code. If using angular-cli then the ng build will create a the chunk names with hash and it is different each time when the content is changed.

    4. check the cache header for lazy loaded module

    Login or Signup to reply.
  5. 0

    1) Hash Angular files while building

    Angular has a built in hashing mechanism to ensure updated files are not cached. To activate this functionality you have to add the property "outputHasing": "all" to the build configurations in your angular.json file.
    Alternatively you can build your project with the command: ng build --output-hashing=all

    2) Add server side Cache-Control headers

    As @Khalid mentionned, Angular does not ensure the index.html file isn’t cached. Server-side response headers can take up this task. Cache-Control is a header that you can configure on your web server to add to all outgoing requests, which will tell the browser and CDNs how to cache your content.

    On Apache you should set these cache control headers in your main configuration file ‘httpd.conf’. In case you can’t access this file due to hosting limitations you can set it in your ‘.htaccess’ file. To not cache the index.html file use following cache control headers:

    #Initialize mod_rewrite
<FilesMatch ".(html|htm)$">
  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, 12 Jan 1980 05:00:00 GMT"
  </IfModule>
</FilesMatch>

    NB: Make sure that the mod_headers are enabled in your main configuration file. Following line should be uncommented (without the #).

    LoadModule headers_module modules/mod_headers.so

    While calling the latest version of your page (f.ex. by refreshing without using cached content CTRL+SHIFT+F5) you should now see these cache control headers in your response headers. You can verify these headers in the Inspect > Network tab in your browser.

    3) Handle previously cached files

    All versions of your index.html file that were cached in your clients browser -before you added the new cache control headers- will still be cached. To overcome this issue you should use different URL’s. This can be done by using a new domain name (as long as you do not care about SEO) or by adding a URL parameter (without touching SEO).

    After building your Angular project as described above and adding this configuration on your Apache web server, users will always get the newest version of your page.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search