Angular 应用未向最终用户提供最新的构建文件

Question

我有一个 Angular Web 应用程序，它有更频繁的更改，所以当我构建并发布到 IIS 时，应用程序不会向最终用户提供最新的构建文件。从服务器获取新文件需要按Ctrl+F5。

我使用下面的 CLI 命令来生成构建文件。我用 Angular 8.

ng build --aot --outputHashing=bundles --prod

我应该为此添加任何其他参数吗？

Answer 1

我遇到了类似的问题并发现它来自网络服务器（在我的例子中是 Apache）。

在生产环境中部署应用程序时，根文件 (index.html) 包含以下代码：

<!doctype html>
<html lang="en">
    <head>
        <base href="/">
        <title>test</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="manifest" href="manifest.json">
    </head>
    <body>
        <app-root></app-root>
        <script src="/runtime.937c2b326bb921beac97.js" defer></script>
        <script src="/polyfills.a78c48dee545feb95e6a.js" defer></script>
        <script src="/scripts.14a9d42d0791cb2fa37d.js" defer></script>
        <script src="/main.57de7a395d76adaeeb43.js" defer></script>
    </body>
</html>

默认情况下，我的 Apache 服务器缓存了 JS 文件和 index.html。所以当我部署新版本时，用户仍然得到引用旧 JS 文件的旧 index.html。

为了解决这个问题，我强制浏览器不缓存 index.html。每次在浏览器中加载应用程序时都会获取它，因此版本始终是最新的，JS 文件也是如此。

Apache 配置：

<VirtualHost *:443>
    # ...
    <If "%{REQUEST_URI} == '/'">
        Header Set Pragma "no-cache"
        Header Set Expires "Thu, 1 Jan 1970 00:00:00 GMT"
        Header Set Cache-Control "max-age=0, no-store, no-cache, must-revalidate"
        Header Unset ETag
        FileETag None
    </If>
</VirtualHost>

对于 IIS 服务器，请参阅 How to disable caching of single page application HTML file served through IIS?

Answer 2

为此，您可以将 IIS 设置为不缓存 index.html 文件。为此，您只需将 web.config 文件包含到您的 www 文件夹中，然后将此设置添加到其中。

  <location path="index.html">
    <system.webServer>
      <httpProtocol>
        <customHeaders>
          <add name="Cache-Control" value="no-cache" />
        </customHeaders>
      </httpProtocol>
    </system.webServer>
  </location>

</configuration>

Angular 应用未向最终用户提供最新的构建文件

Angular App not serving latest build files to end users

angular

angular8