Angular Universal and Firebase Hosting - What is this long string between main and .js?

Question

In the Angular Universal project, sometimes when I run 'ng deploy', main.xxxxxxxx.js file is generated instead of main.js in /dist/my-project/dist/my-project/server directory. Does anyone know what's the difference between main.xxxxxxxx.js and main.js? Also In what circumstances does main.xxxxxxxx.js is created instead of main.js when 'ng deploy' is run? Thanks.

Image for main.xxxxxxxx.js

Image for main.js

Answer 1

Angular generates unique file names when you build your application. Angular does this by adding the file checksum (hash) to the filename.

Why? Browsers and proxies can cache files. When you build a new version of your application you want users to get the new files, not the old ones from a cache. Because Angular generates unique file names, these files are not in any cache and users get the new version.

However, Angular only does this depending on the configuration (outputHashing configuration option). I am guessing that you get the files with the hash on a production build (ng build --prod) and the plain file names on a development build (ng build).