Output files' filename for scripts hashes are incorrect

[JoshuaEN]

🐞 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 (per original bug report, I did not test this)

Description

Reopening #22602
If I understand correctly, per https://github.com/angular/angular-cli/blob/master/CHANGELOG.md#1322-2022-02-02, this should be fixed in 13.2.2 and higher (since the main PR [#22612] associated with ff54b49e7 closed #22602 ) . However, I see the issue in 13.2.2, 13.3.0, and 14.0.0-next.6.

🔬 Minimal Reproduction

(copied from original bug, except for updated clone link to a fork with 13.3.0)

1. Clone https://github.com/JoshuaEN/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.3.0
Node: 16.14.2
Package Manager: npm 8.5.0
OS: win32 x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1303.0
@angular-devkit/build-angular   13.3.0
@angular-devkit/core            13.3.0
@angular-devkit/schematics      13.3.0
@schematics/angular             13.3.0
rxjs                            7.4.0
typescript                      4.5.5

[alan-agius4]

Hi @JoshuaEN,

I am unable to replicate with the above steps. I got 2 different file hashes as expected.

➜  ng build --configuration=production
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files           | Names         |  Raw Size | Estimated Transfer Size
main.509bb19c0b16e7c6.js      | main          | 115.87 kB |                34.76 kB
polyfills.9d30918f19ecba24.js | polyfills     |  33.08 kB |                10.65 kB
runtime.79877de42b83700a.js   | runtime       |   1.11 kB |               614 bytes
scripts.f1198c12a91b1141.js   | scripts       |  28 bytes |                32 bytes
styles.ef46db3751d8e999.css   | styles        |   0 bytes |                       -

                              | Initial Total | 150.09 kB |                46.04 kB

Build at: 2022-03-29T11:45:17.740Z - Hash: 011b2c0234fcd2b0 - Time: 10619ms
➜  sed  -i -e 's/es2017/es2020/g' tsconfig.json
➜  ng build --configuration=production         
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files           | Names         |  Raw Size | Estimated Transfer Size
main.e3154314e335f51f.js      | main          | 115.49 kB |                34.71 kB
polyfills.3e6b493149ea379c.js | polyfills     |  33.03 kB |                10.61 kB
runtime.79877de42b83700a.js   | runtime       |   1.11 kB |               614 bytes
scripts.f1198c12a91b1141.js   | scripts       |  25 bytes |                29 bytes
styles.ef46db3751d8e999.css   | styles        |   0 bytes |                       -

                              | Initial Total | 149.64 kB |                45.95 kB

Build at: 2022-03-29T11:45:34.490Z - Hash: ca1ca1a1bb6a4966 - Time: 10951ms

[JoshuaEN]

Hi @alan-agius4,

Thanks for the quick reply!

The output hash that remains the same is for the scripts.{hash}.js file.

In your build output, the scripts file name remains the same but the size changes:

Combined with 1 year caches for static files and script tag integrity attributes, this causes the browser to use the previously cached version (if present) and then reject the script because the integrity hash does not match.

[alan-agius4]

@JoshuaEN, the scripts option is only meant to be used for static JavaScript files. The fact that is allowing TypeScript files is a bug that will be addressed in version 14.

Using JavaScript files in the scripts will result in correct behaviour.

[JoshuaEN]

@alan-agius4, I see the same behavior when changing the script to a .js file (script-js branch on example repository).

$ ng build --configuration=production
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files           | Names         |  Raw Size | Estimated Transfer Size
main.509bb19c0b16e7c6.js      | main          | 115.87 kB |                34.76 kB
polyfills.9d30918f19ecba24.js | polyfills     |  33.08 kB |                10.65 kB
runtime.79877de42b83700a.js   | runtime       |   1.11 kB |               614 bytes
scripts.f1198c12a91b1141.js   | scripts       |  28 bytes |                32 bytes
styles.ef46db3751d8e999.css   | styles        |   0 bytes |                       -

                              | Initial Total | 150.09 kB |                46.04 kB

Build at: 2022-03-29T14:37:49.187Z - Hash: 93d8a2b1b4f30f6b - Time: 8213ms
$ sed  -i -e 's/es2017/es2020/g' tsconfig.json
$ ng build --configuration=production
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files           | Names         |  Raw Size | Estimated Transfer Size
main.e3154314e335f51f.js      | main          | 115.49 kB |                34.71 kB
polyfills.3e6b493149ea379c.js | polyfills     |  33.03 kB |                10.61 kB
runtime.79877de42b83700a.js   | runtime       |   1.11 kB |               614 bytes
scripts.f1198c12a91b1141.js   | scripts       |  25 bytes |                29 bytes
styles.ef46db3751d8e999.css   | styles        |   0 bytes |                       -

                              | Initial Total | 149.64 kB |                45.95 kB

Build at: 2022-03-29T14:38:14.952Z - Hash: dd2e92ef69b92921 - Time: 7026ms

I also see this on 14.0.0-next.6 (script-js-next branch on example repository). The real-world case we saw this in was using only .js script files as well.

Are there more changes planned for v14 that will address this?

[alan-agius4]

What is happening here is that the filename is being generated prior to the optimization phase where the content is being changed.

We are not currently actively looking into addressing this issue since it's rather an edge case.