I deployed a production Angular 9 application on S3 + cloudfront. It works very well but I've some problems every time I release a new update of the application. I read many articles:

• https://medium.com/@sumn2u/react-progressive-web-app-s3-and-cloudfront-6c890fa873fb
• https://medium.com/driven-by-code/on-the-importance-of-correct-headers-and-metadata-in-s3-origins-for-aws-cloudfront-50da2f9370ae

I set right caching for index.html and ngsw-worker.js so they are not cached from cloudFront. Every Angular deploy is saved on S3 on a new folder with the build number, like this:

After I do this, I change the directory name of CloudFront in order to point to the new location. Unfortunately, doind this create several problems to customers that have previous version of the application. In fact if the service worker didn't get the update when the user load the application, if the user load some part of the application that were not cached before, I get a error loading chunk (because it doens't exist anymore on S3).

So I'm wondering what's the best way to continuosly deploy an Angular application on AWS S3 + CloudFront. Am I supposed to load all files inside the same folder? Isn't it too inefficient (very soon I'll have thousands of files)? Any hint is really appreciated.