Output files' filename hashes are incorrect

[danielkrausz]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

Yes, the previous version in which this bug was not present was: Angular 11

We could reproduce the issue with Angular 12 and Angular 13 as well, with different — faulty — outcomes.

On Angular 12, the issue affected both the main.js and polyfill.js output files in the distribution build. Based on our initial testing, in Angular 13 the issue only affects the scripts.js file in the distribution build.

Description

It seems that some output files' file name hashes are generated incorrectly, when building with output hashing (e.g. outputHashing = all in angular.json). This can cause issues e.g. for Angular applications served from CDNs, where only changed files are uploaded, and the files are diff’d based on their revhash in the filename.

In our concrete case (Angular 13, having outputHashing = all in angular.json), when changing the TypeScript target version from es2017 to any of es2019, es2020, or es2021 in the project’s tsconfig.json, then rebuilding the project, the file name hash of the generated output file containing global scripts (in our case, the file is named per the default configuration scripts.js) does not change, even though the contents of the scripts.js generated output file itself changes.

The expected behaviour is that the revhash generated into any output file’s filename should change if (and only if) the final contents of the output file changes.

🔬 Minimal Reproduction

1. Clone https://github.com/tresorit/angular-filename-hashing-bug-reproduction.
2. Run npm ci to install dependencies.
3. Run ng build --configuration=production (with the default es2017 target in tsconfig.json).
4. Observe the contents of the output dist/angular-filename-hashing-bug-reproduction/scripts.{revhash_1}.js file to be try{console.log()}catch(c){}.
5. Change the compilerOptions.target to es2019 (or es2020 or es2021) from es2017 in tsconfig.json.
6. Run ng build --configuration=production.
7. Observe the contents of the output dist/angular-filename-hashing-bug-reproduction/scripts.{revhash_2}.js file to be try{console.log()}catch{} (different from the output from step 4).
8. Observe that revhash_1 equals revhash_2.

🌍 Your Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 13.1.4
Node: 16.13.2
Package Manager: npm 8.3.2
OS: darwin arm64

Angular: 13.1.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1301.4
@angular-devkit/build-angular   13.1.4
@angular-devkit/core            13.1.4
@angular-devkit/schematics      13.1.4
@angular/cli                    13.1.4
@schematics/angular             13.1.4
rxjs                            7.4.0
typescript                      4.5.5

Anything else relevant?

It’s a long shot and we’re not sure whether it’s even connected, but we’ve found that hashing for the scripts doesn’t use contenthash, which might be relevant:

angular-cli/packages/angular_devkit/build_angular/src/webpack/utils/helpers.ts

Lines 41 to 46 in d18469e

	all: {
	chunk: `.[contenthash:${length}]`,
	extract: `.[contenthash:${length}]`,
	file: `.[hash:${length}]`,
	script: `.[hash:${length}]`,
	},

[alan-agius4]

Closed via #22612