Why do I need to clean cache to see the up to date modules in my angular app?

问题

We have an Angular 10 app that everytime we make a deployment to AWS, or even in DEV enviroment(over ngnix) we need to clean cache (CTRL+F5, doing this is solved). We have tried in the Angular project the next meta tags:

<meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, precheck=0">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">

Another ideas we have tried is alternating hashing the file names by deployment. Once is done without hash, and the next time, with hash. Per example:

6-es5.js -> changes to -> 6-es5.b0d27b410e5c019afd47.js

In AWS S3(Over Amazon Cloudfront) we tried setting up

Minimum TTL 0
Maximum TTL 0
Default TTL 0

We dont know by now what another ideas could be possible, or what we are doing wrong. Any ideas would be helpful. Thanks guys!

UPDATE EDIT:

The meta tags were not added as I said in all the components. We already added it to the index.html(we missed include them in this file) and now it's working as expected, but we are not sure if its just a temporal solution by now.

回答1:

You can do following steps :

1. Directly deploy build folder to S3 bucket.
2. Not required to cached index.html file
3. Whenever you deployed or upload build to S3,do the following step
4. Go to cloudfront
5. Do invalidation of objects
6. Create entry /*

Deployment script

For continuous deployment you can write script using boto3 of aws for automatically invalidate cached once folder uploaded successfully.

来源：https://stackoverflow.com/questions/63728814/why-do-i-need-to-clean-cache-to-see-the-up-to-date-modules-in-my-angular-app