javascript Angular 应用程序必须在新部署后清除缓存
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/55402751/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular app has to clear cache after new deployment
提问by zhangjinzhou
We have an Angular 6 application. It's served on Nginx. And SSL is on.
我们有一个 Angular 6 应用程序。它在 Nginx 上提供。并且 SSL 已开启。
When we deploy new codes, most of new features work fine but not for some changes. For example, if the front-end developers update the service connection and deploy it, users have to open incognito window or clear cache to see?the new feature.
当我们部署新代码时，大多数新功能都可以正常工作，但对于某些更改则不行。例如，如果前端开发人员更新服务连接并部署它，用户必须打开隐身窗口或清除缓存才能看到新功能。
What?type of changes are not updated automatically? Why are they different from others?
什么？类型的更改不会自动更新？为什么他们与其他人不同？
What's the common solution to avoid the issue?
避免该问题的常见解决方案是什么？
回答by Joel Joseph
The problem is When a static file gets cached it can be stored for very long periods of time before it ends up expiring. This can be an annoyance in the event that you make an update to a site however, since the cached version of the file is stored in your visitors' browsers, they may be unable to see the changes made.
问题是当一个静态文件被缓存时，它可以在它到期之前存储很长时间。如果您对站点进行更新，这可能会很麻烦，但是，由于文件的缓存版本存储在访问者的浏览器中，他们可能无法看到所做的更改。
Cache-bustingsolves the browser caching issue by using a unique file version identifier to tell the browser that a new version of the file is available. Therefore the browser doesn't retrieve the old file from cache but rather makes a request to the origin server for the new file.
Cache-busting通过使用唯一的文件版本标识符来告诉浏览器该文件的新版本可用，从而解决了浏览器缓存问题。因此浏览器不会从缓存中检索旧文件，而是向源服务器请求新文件。
Angular cli resolves this by providing an --output-hashingflag for the build command.
Angular cli 通过为--output-hashingbuild 命令提供一个标志来解决这个问题。
Check the official doc : https://angular.io/cli/build
检查官方文档：https: //angular.io/cli/build
Example
例子
ng build --aot --output-hashing=all
Below are the options you can pass in --output-hashing
以下是您可以传入的选项 --output-hashing
- none: no hashing performed
- media: only add hashes to files processed via [url|file]-loaders
- bundles: only add hashes to the output bundles
- all: add hashes to both media and bundles
- none：不执行散列
- 媒体：仅向通过 [url|file]-loaders 处理的文件添加哈希
- 捆绑包：仅向输出捆绑包添加哈希
- 全部：向媒体和捆绑包添加哈希
回答by Alejo JM
for me adding:
为我补充：
ng build --aot --output-hashing=all
to the build commands is not enough, when you have your app behind a CDN and a good cache nginx config.
当您的应用程序位于 CDN 和良好的缓存 nginx 配置后面时，仅构建命令是不够的。
1- The first thing was remove the cache for html files (nginx):
1-第一件事是删除 html 文件的缓存（nginx）：
location ~ \.(html)$ {
add_header Pragma "no-cache";
add_header Cache-Control "no-store";
add_header strict-transport-security "max-age=31536000";
add_header X-Frame-Options "SAMEORIGIN";
try_files $uri $uri/ /index.html;
}
for the static files (js/css ...) leave cache working (network performance / usability):
对于静态文件（js/css ...），让缓存工作（网络性能/可用性）：
location ~ \.(css|htc|less|js|js2|js3|js4)$ {
expires 31536000s;
add_header Pragma "public";
add_header Cache-Control "max-age=31536000, public";
try_files $uri $uri/ /index.html;
}
2- Leave dev/prod builds exaclty the sames, for testing purpose. The final build dev command:
2- 保留 dev/prod 构建完全相同，用于测试目的。最终构建 dev 命令：
ng build --env=dev --aot=true --output-hashing=all --extract-css=true
3- We need on every deploy the client browser load all javascript files from the server not from the cache, even if the deploy was a minor update. Is like the angular have some bugs with this: https://github.com/angular/angular-cli/issues/10641and happend to me.
3- 我们需要在每次部署时客户端浏览器从服务器而不是从缓存加载所有 javascript 文件，即使部署是一个小更新。就像 angular 有一些错误：https: //github.com/angular/angular-cli/issues/10641并且发生在我身上。
I ended using the power of bash, this are my scripts for kill the cache on every development (prod/dev) using package.json file:
我结束了使用 bash 的功能，这是我使用 package.json 文件在每个开发（prod/dev）上杀死缓存的脚本：
"scripts": {
...
"deploy_dev": "ng build --env=dev --aot=true --output-hashing=all --extract-css=true && npm run add_date",
"deploy_prd": "ng build --prod && npm run add_date",
"add_date": "npm run add_date_js && npm run add_date_css && npm run rm_bak_files",
"add_date_js": "for i in dist/*; do if [ -f $i ]; then LC_ALL=C sed -i.bak 's:js\":js?'$(date +%H%M%m%d%y)'\":g' $i; fi done",
"add_date_css": "sed -i.bak 's:css\":css?'$(date +%H%M%m%d%y)'\":g' dist/index.html",
"rm_bak_files": "find dist -name '*.bak' -exec rm -Rf {} \;"
},
commands explanation:
add_date_js: find and replace to all files "js" with "js?{date+%H%M%m%d%y}"
add_date_css: find and replace in dist/index.html "css" with "css?{date+%H%M%m%d%y}"
rm_bak_files: remove all .bak files (network performance)
命令解释：
add_date_js：用“js?{date+%H%M%m%d%y}”查找并替换所有文件“js”
add_date_css：在dist/index.html中查找和替换“css”为“css? {date+%H%M%m%d%y}"
rm_bak_files：删除所有 .bak 文件（网络性能）
Those sed commands works on both GNU/BSD/Mac.
这些 sed 命令适用于 GNU/BSD/Mac。
links:
Angular - Prod Build not generating unique hashes
sed in-place flag that works both on Mac (BSD) and Linux
RE error: illegal byte sequence on Mac OS X
Inline if shell script
How to loop over files in directory and change path and add suffix to filename
Is it possible to build separate CSS file with angular-cli?
链接：
Angular - Prod Build 不生成唯一的哈希值
sed 就地标志，适用于 Mac (BSD) 和 Linux
RE 错误：Mac OS X 上的非法字节序列
如果 shell 脚本内联
如何循环目录中的文件并更改路径和向文件名添加后缀
是否可以使用 angular-cli 构建单独的 CSS 文件？
