Angular: Add hashing to the files in assets during build

Question

I have been looking up for the solution but nothing is useful is found yet.

Problem: I have an application in angular and I've added custom styles and scripts in my assets folder. The location of my assets folder is src->assets. I make the build of my project using ng build --prod --output-hashing=all but the problem with this command is that it only hashes components & images used in my component but all the other files such as CSS, js files, and images that added by CSS are not hashed in the build.

It is causing problem on the customer side as due to continuous releases, sometimes the browser doesn't refresh CSS, JS files for new deployed release and they complain that the styling and features are not working.

What I have tried: I tried many things like i mentioned above.

1. ng build --prod
2. output-hashing

But none of them have been beneficial for me. All i want is to get my custom css and js files get hashed during build. Is there any solution?

PLEASE FEEL FREE TO ASK ANYTHING ELSE THAT IS REQUIRED OR I MISSED IN MY QUESTION

*EDIT: * Similar question have been asked here but not answered properly yet.

Answer 1

There is no need to add --output-hashing=all flag to your build command when you want to build up the new bundles, just put this option in your angular.json file like the below:

    "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all", //Normally this is what you need
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true
}

With this flag in your angular.json, normally all your CSS and js files will have a hash alongside the filename(something like main.64bc2a3e9a32c08c.js) so if the user simply opens the page it will be able to fetch the latest bundle. Btw --output-hashing has the below values:

none | all | media | bundles

So when you set it to all it means I want to add hash to all of the files. Apart from that there is another option, you can take a look at cache busting concept in webpack