Angular 7 Caching Issues

Question

We have an Angular 7 application and we are using Angular CLI for the build, we build the application with:

ng build --prod

We have checked and the hash is added to the filenames. We have also set index.html with the following:

<meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">

Despite this we are still having to ask our users to ctrl+F5 after a release to see the latest version, it appears Chrome is caching the index.html.

Is there anyway around this, a better way around this. We are considering with each release changing the index.html file to append the current date and time to the name and the angular.json but we would prefer to solve this using the tools provided.

Any help appreciated.

Possible duplicate of [How to prevent Browser cache on Angular 2 site?](https://stackoverflow.com/questions/39647810/how-to-prevent-browser-cache-on-angular-2-site) — Vikas, Apr 29 '19 at 08:54

score 3 · Answer 1 · edited Jun 20 '20 at 09:12

IIS/Direct Hosting Solution

You could add the "cache busting" to your interceptor if you're using it:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpHeaders } from '@angular/common/http';

@Injectable()
export class CacheInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    const httpRequest = req.clone({
      headers: new HttpHeaders({
        'Cache-Control': 'no-cache',
        'Pragma': 'no-cache',
        'Expires': 'Sat, 01 Jan 2000 00:00:00 GMT'
      })
    });

    return next.handle(httpRequest);
  }
}

Further details here:

https://medium.com/@tltjr/disabling-internet-explorer-caching-in-your-angular-5-application-3e148f4437ad

Web API/IIS Hoting Solution

If you're using a .Net Core Web API project to host the Angular project then you can add the following lines to your Startup.cs in the public void Configure(IApplicationBuilder app, IHostingEnvironment env) method.

The important lines are:

context.Context.Response.Headers.Add("Cache-Control", "no-cache, no-store, must-revalidate");
context.Context.Response.Headers.Add("Expires", "0");
context.Context.Response.Headers.Add("Pragma", "no-cache");

 public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseHsts();
            }

            app.UseAuthentication();

            app.UseDefaultFiles();

            app.UseStaticFiles(new StaticFileOptions
            {
                OnPrepareResponse = context =>
                {
                    context.Context.Response.Headers.Add("Cache-Control", "no-cache, no-store, must-revalidate");
                    context.Context.Response.Headers.Add("Expires", "0");
                    context.Context.Response.Headers.Add("Pragma", "no-cache");
                }
            });

            app.UseMvc();

            app.MapWhen(x => !x.Request.Path.Value.StartsWith("/api"), builder =>
            {
                builder.Use((context, next) =>
                {
                    context.Request.Path = new PathString("/index.html");
                    return next();
                });

                builder.UseStaticFiles(new StaticFileOptions
                {
                    OnPrepareResponse = context =>
                    {
                        context.Context.Response.Headers.Add("Cache-Control", "no-cache, no-store, must-revalidate");
                        context.Context.Response.Headers.Add("Expires", "0");
                        context.Context.Response.Headers.Add("Pragma", "no-cache");
                    }
                });

            });
        }

We tried various solutions but this was the only "cache busting" solution that worked for us.

Good luck!

Appreciate the response, we are hosting directly inside IIS, I was hoping for a Angular framework option but I guess we can just disable cache of index.html in IIS. — user351711, Apr 29 '19 at 08:37

score 1 · Answer 2 · answered Apr 19 '20 at 11:08

1

build the app using the command

ng build --prod --output-hashing=all

answered Apr 19 '20 at 11:08

Vipin

96
6

Angular 7 Caching Issues

2 Answers2

IIS/Direct Hosting Solution

Web API/IIS Hoting Solution