Angular 7 Проблемы с кэшированием - PullRequest
Новая
       17

Angular 7 Проблемы с кэшированием

4 голосов
/ 29 апреля 2019

У нас есть приложение 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 кэширует индекс.html.

В любом случае, есть ли лучший способ обойти это?Мы рассматриваем при каждом выпуске изменение файла index.html для добавления текущей даты и времени к имени и angular.json, но мы бы предпочли решить эту проблему с помощью предоставленных инструментов.

Любая помощь приветствуется.

1 Ответ

1 голос
/ 29 апреля 2019

IIS / Direct Hosting Solution

Вы можете добавить «очистку кэша» к вашему перехватчику, если вы используете его: 

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

Решение для веб-API / IIS

Если вы используете проект .Net Core Web API для размещения проекта Angular, вы можете добавить следующие строки в свой Автозагрузка.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");
                    }
                });

            });
        }

Мы пробовали различные решения, но это было единственное решение для очистки кэша, которое работало для нас.

Удачи!

...