Angular构建疑问：ng build输出文件名始终相同

Great question! Let's walk through why your hashed filenames aren't updating after changes, and how to get unique names every time you run your build command.

First, Rule Out the Most Common Mistake #

If you're modifying files directly in the dist folder and then re-running the build, that won't work! The dist directory is just the output of your build process—Angular will overwrite those files with fresh builds generated from your source code (in the src folder). Make sure you're making changes to your actual source files (like .ts, .html, or .js files in src/app or related directories) instead.

1. Disable Build Cache #

Angular CLI uses a build cache by default to speed up subsequent builds. Sometimes this cache can hold onto old compiled assets even after you've modified source code. To bypass it for a single build, add the --no-cache flag to your command:

ng build --prod --aot --output-hashing=all --base-href=... --no-cache

If you want to clear the cache entirely (to ensure no old data is left), you can delete the cache directory manually:

• On most systems, the cache lives at node_modules/.cache/@angular/build—just delete this folder and re-run your build.

2. Verify Your outputHashing Configuration #

Even though you're passing --output-hashing=all via the command line, it's worth double-checking your angular.json to make sure there's no conflicting configuration that might override it. Look for the production configuration block:

"architect": {
  "build": {
    "configurations": {
      "production": {
        "outputHashing": "all",
        // ... other production settings
      }
    }
  }
}

Ensure outputHashing is set to "all" here—command line arguments should take priority, but confirming this eliminates any configuration-related surprises.

3. Make Sure Your Changes Actually Alter the Compiled Output #

If your modifications don't change the final compiled code (e.g., adding comments, whitespace, or code that gets tree-shaken out), the file content stays the same, so the hash won't update. Test with a meaningful change:

• Modify a component's template text (e.g., change a button label)
• Update a variable that's used in your application logic
• Add a console log that will be included in the final bundle

4. Force Unique Hashes with a Build Timestamp (Ultimate Fix) #

If you need guaranteed unique filenames every time—even for minor or non-code changes—you can inject a dynamic build timestamp into your app. Here's how:

1. Open src/environments/environment.prod.ts and add a build timestamp:

   export const environment = {
     production: true,
     buildTimestamp: new Date().getTime()
   };
   

2. Reference this variable somewhere in your app (e.g., in your root component's ngOnInit method) to ensure it gets included in the bundle:

   import { environment } from '../environments/environment';
   
   export class AppComponent {
     ngOnInit() {
       // This ensures the timestamp is part of the compiled code
       console.log('Build timestamp:', environment.buildTimestamp);
     }
   }
   

Now every build will generate a unique timestamp, which changes the content of the bundle and triggers a new hash for affected files.

内容的提问来源于stack exchange，提问作者Carlos Henrique Biazin Esteves