Angular 7 缓存问题

Question

我们有一个 Angular 7 应用程序，我们使用 Angular CLI 进行构建，我们使用以下命令构建应用程序：

ng build --prod

我们已经检查过并将哈希值添加到文件名中。我们还使用以下内容设置了 index.html：

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

尽管如此，我们仍然需要在发布后要求我们的用户按 ctrl+F5 来查看最新版本，看来 Chrome 正在缓存 index.html。

无论如何，有没有更好的方法来解决这个问题。我们正在考虑在每个版本中更改 index.html 文件以将当前日期和时间附加到名称和 angular.json 中，但我们更愿意使用提供的工具来解决这个问题。

任何帮助表示赞赏。

Answer 1

IIS/直接托管解决方案

如果您正在使用它，您可以将“缓存清除”添加到您的拦截器中：

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);
  }
}

更多详细信息请参见此处：

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

Web API/IIS 加热解决方案

如果您使用 .Net Core Web API 项目来托管 Angular 项目，则可以将以下行添加到方法中的 Startup.cs 中public void Configure(IApplicationBuilder app, IHostingEnvironment env)。

重要的几行是：

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");
                    }
                });

            });
        }

我们尝试了各种解决方案，但这是唯一对我们有用的“缓存清除”解决方案。

祝你好运！