Output files' filename for scripts hashes are incorrect #22906

JoshuaEN · 2022-03-29T00:08:11Z

🐞 Bug report

Command (mark with an `x`)

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)

Clone https://github.com/JoshuaEN/angular-filename-hashing-bug-reproduction
Run npm ci to install dependencies.
Run ng build --configuration=production (with the default es2017 target in tsconfig.json).
Observe the contents of the output dist/angular-filename-hashing-bug-reproduction/scripts.{revhash_1}.js file to be try{console.log()}catch(c){}.
Change the compilerOptions.target to es2019 (or es2020 or es2021) from es2017 in tsconfig.json.
Run ng build --configuration=production.
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).
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

The text was updated successfully, but these errors were encountered:

alan-agius4 · 2022-03-29T11:45:55Z

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 · 2022-03-29T13:17:19Z

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 · 2022-03-29T13:27:35Z

@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 · 2022-03-29T14:39:39Z

@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 · 2022-03-30T10:44:43Z

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.

martinfrancois · 2022-07-06T17:53:52Z

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.

@alan-agius4 Would you be open to take into consideration a contribution to address this issue, or is generating the filename after the optimization phase something you do not want by design?

In case you are open to it, could you give a rough estimation on the amount of effort required to do this (for the change only, disregarding code review etc.).

… for scripts which are changed during the optimization phase Instead of generating the content hash based on the content of scripts BEFORE the optimization phase, the content hash is generated AFTER the optimization phase. Prevents caching issues where browsers block execution of scripts due to the integrity hash not matching with the cached script in case of a script being optimized differently than in a previous build, where it would previously result in the same content hash. Fixes angular#22906

… for scripts which are changed during the optimization phase Instead of generating the content hash based on the content of scripts BEFORE the optimization phase, the content hash is generated AFTER the optimization phase. Prevents caching issues where browsers block execution of scripts due to the integrity hash not matching with the cached script in case of a script being optimized differently than in a previous build, where it would previously result in the same content hash. Fixes #22906

… for scripts which are changed during the optimization phase Instead of generating the content hash based on the content of scripts BEFORE the optimization phase, the content hash is generated AFTER the optimization phase. Prevents caching issues where browsers block execution of scripts due to the integrity hash not matching with the cached script in case of a script being optimized differently than in a previous build, where it would previously result in the same content hash. Fixes #22906 (cherry picked from commit 357c45e)

angular-automatic-lock-bot · 2022-08-12T08:03:14Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

alan-agius4 added the needs: more info Reporter must clarify the issue label Mar 29, 2022

ngbot bot modified the milestone: Backlog Mar 30, 2022

alan-agius4 changed the title ~~Output files' filename hashes are incorrect (reopening #22602)~~ Output files' filename for scripts hashes are incorrect Mar 30, 2022

alan-agius4 mentioned this issue Jul 6, 2022

Unique content hash per build #23510

Closed

15 tasks

martinfrancois mentioned this issue Jul 8, 2022

fix(@angular-devkit/build-angular): generate different content hashes for scripts which are changed during the optimization phase #23531

Merged

dgp1130 closed this as completed in #23531 Jul 12, 2022

angular-automatic-lock-bot bot locked and limited conversation to collaborators Aug 12, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Output files' filename for scripts hashes are incorrect #22906

Output files' filename for scripts hashes are incorrect #22906

JoshuaEN commented Mar 29, 2022

alan-agius4 commented Mar 29, 2022 •

edited

Loading

JoshuaEN commented Mar 29, 2022

alan-agius4 commented Mar 29, 2022

JoshuaEN commented Mar 29, 2022

alan-agius4 commented Mar 30, 2022

martinfrancois commented Jul 6, 2022 •

edited

Loading

angular-automatic-lock-bot bot commented Aug 12, 2022

Output files' filename for scripts hashes are incorrect #22906

Output files' filename for scripts hashes are incorrect #22906

Comments

JoshuaEN commented Mar 29, 2022

🐞 Bug report

Command (mark with an x)

Is this a regression?

Description

🔬 Minimal Reproduction

🌍 Your Environment

alan-agius4 commented Mar 29, 2022 • edited Loading

JoshuaEN commented Mar 29, 2022

alan-agius4 commented Mar 29, 2022

JoshuaEN commented Mar 29, 2022

alan-agius4 commented Mar 30, 2022

martinfrancois commented Jul 6, 2022 • edited Loading

angular-automatic-lock-bot bot commented Aug 12, 2022

Command (mark with an `x`)

alan-agius4 commented Mar 29, 2022 •

edited

Loading

martinfrancois commented Jul 6, 2022 •

edited

Loading