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项目，则可以通过public void Configure(IApplicationBuilder app, IHostingEnvironment env)方法将以下几行添加到Startup.cs中。

重要的几行是：

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

            });
        }

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

祝你好运！

Answer 2

使用命令构建应用

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

Angular 7缓存问题

2 个答案:

IIS /直接托管解决方案

Web API / IIS热点解决方案