Скачать или смотреть How to Customize Angular Build File Naming Without Hashing

Learn how to remove hashed file names from your Angular build process and ensure a clean, predictable output.
---
This video is based on the question https://stackoverflow.com/q/70147553/ asked by the user 'krzchbt' ( https://stackoverflow.com/u/12478766/ ) and on the answer https://stackoverflow.com/a/70147568/ provided by the user 'Ismael Padilla' ( https://stackoverflow.com/u/3700738/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Angular build file naming without hashing

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Customize Angular Build File Naming Without Hashing

When working with Angular applications, you may have noticed that the default build process generates files with hash values in their names. For example, running ng build typically produces file names like main.67a03e810140e0bd.js, which include a long string of letters and numbers. While these hashes are useful for cache management, there are scenarios where you may prefer clean, simple file names without this added complexity. In this guide, we'll explore how to achieve this and discuss when it might be appropriate to do so.

The Problem of Hashed Filenames

During the build process, Angular includes hash values in generated file names to help with efficient caching. By doing this, browsers are signaled to load a new version of a file if the filename changes, thus avoiding issues with outdated cached versions. However, in certain situations—such as development or specific deployment environments—you may wish to eliminate these hashes for easier management or clearer organization.

Here's what a typical ng build output looks like:

[[See Video to Reveal this Text or Code Snippet]]

As you can see, the hash values make it difficult to easily identify or reference the files, especially when trying to manage or serve them in a custom deployment environment like a .NET application.

Solution: Remove Hashes from File Names

To customize the output file naming and remove the hashes, you can utilize the --output-hashing option when building your Angular application. This option allows you to specify how the output files should be named. Specifically, if you want to avoid hashed names, follow these steps:

Step-by-Step Guide

Open Your Command Line Interface: You'll need to be in your Angular project directory.

Run the Build Command with the Option: Use the following command to build your application without hashes:

[[See Video to Reveal this Text or Code Snippet]]

What's Next?

While removing hashes from filenames can simplify your setup, it is important to reconsider its implications. Here are some points to keep in mind:

Cache Management: One of the main reasons for using hashed filenames is to prevent users' browsers from caching old files when new versions are deployed. Without hashes, you should have a strategy in place to handle cache invalidation.

Development vs Production: This approach might be beneficial during development to streamline local testing, but be cautious when considering it for production environments. In production, using hashed filenames can lead to a better user experience and resource management.

Collaboration with .NET Applications: Since you mentioned that your Angular app is part of a .NET application, ensure that your deployment process is adjusted accordingly to accommodate these changes.

Conclusion

In conclusion, while Angular's default hashed filenames provide excellent advantages for cache management, they may not always be necessary. By adjusting your build process with the --output-hashing=none option, you can create clean filenames that make file management easier without hash values. Just remember to weigh the pros and cons, especially regarding caching strategies for production environments.

By following the steps outlined here, you'll have greater control over your Angular build output, helping you tailor the workflow to better suit your project needs.