Angular 在生产中禁用缓存的部分

我正在开发网站，但是每次我将新版本上传到服务器时，用户都需要清理缓存才能看到更改，这个问题的解决方案是什么？

我尝试通过两种方法来解决这个问题：

The first way:

myApp.run(function($rootScope, $templateCache) {
   $rootScope.$on('$viewContentLoaded', function() {
      $templateCache.removeAll();
   });
});

但这种方式有一个问题，比如ui.bootstrap及其抛出错误。

The second way:

$rootScope.$on("$stateChangeStart", function( event, toState, current ) {

    if (typeof(current) !== 'undefined'){
      $templateCache.remove(current.templateUrl);
    }
})

这不会引发错误，但我不知道这个解决方案是否正确，如果它有效，我需要做什么？

这是服务器配置的问题，以及它如何告诉浏览器缓存的问题HTML用作模板部分的文件。

了解浏览器缓存

你正在尝试做$templateCache.remove(..) and $templateCache.removeAll()这是行不通的，因为模板尚未加载，或者浏览器将使用缓存的版本重新加载它们。

您需要检查浏览器中的网络历史记录，以确保服务器正确处理 HTML 请求。发送您期望的缓存标头设置。对于每个部分，应该有一个302（未修改）响应。当 HTML 文件发生更改时，服务器应将新修改的文​​件发送到浏览器。

另一个问题是服务器上的默认缓存持续时间可能太长。这告诉浏览器应该多久检查一次服务器以发送新版本的 HTML 文件。您可能希望将此持续时间缩短至 1 小时。

大多数网络服务器都预先配置为采用扩展名为.html永远不会改变并且是静态的。因此，默认设置是让浏览器尽可能长时间地缓存这些文件。

您可能想将这些文件重命名为类似的名称.ahtml并将其用作部分文件名。不应该有任何预定义的配置来强制兑现这些文件类型。

了解 $templateCache

这是 AngularJS 中一个非常简单的缓存服务。如果在内存中找不到该 URL，则会从服务器加载该 URL。下次当应用程序运行时需要该部分时，将使用内存版本。该服务器的使用与服务器/浏览器缓存无关。

模板的正确方式

最佳实践是创建一个包含应用程序所需的所有部分模板的 JavaScript 文件。该 JS 文件将调用$templateCache服务并添加这些模板。这提高了应用程序的启动性能，并消除了处理服务器/浏览器缓存的问题。

有几个 grunt 任务可以做到这一点。

https://www.npmjs.com/package/grunt-angular-templates https://www.npmjs.com/package/grunt-angular-templates

https://github.com/karlgoldstein/grunt-html2js https://github.com/karlgoldstein/grunt-html2js

将其与 JavaScript 压缩器结合起来，并将所有 JS 合并到一个文件中，这样就可以顺利完成任务了。