esbuild PWA Version Update: Hash mismatch

[alexfriesen]

Command

build

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

Webpack build

Description

When using Esbuild I am not able to update to the current PWA Version.

SwUpdate.versionUpdates returns a VERSION_INSTALLATION_FAILED with this error:

Hash mismatch (cacheBustedFetchFromNetwork): https://example.com/favicon.ico: expected f27ed357f17b129a31a20512c7d76684d4ef1ffe, got ba16d4dfe88f32b39e8bcbbcae7f00ef7d4af8b2 (after cache busting)
Error: Hash mismatch (cacheBustedFetchFromNetwork): https://example.com/favicon.ico: expected f27ed357f17b129a31a20512c7d76684d4ef1ffe, got ba16d4dfe88f32b39e8bcbbcae7f00ef7d4af8b2 (after cache busting)
    at PrefetchAssetGroup.cacheBustedFetchFromNetwork (https://example.com/ngsw-worker.js:474:21)
    at async PrefetchAssetGroup.fetchFromNetwork (https://example.com/ngsw-worker.js:449:19)
    at async PrefetchAssetGroup.fetchAndCacheOnce (https://example.com/ngsw-worker.js:428:21)
    at async https://example.com/ngsw-worker.js:528:9
    at async https://example.com/ngsw-worker.js:519:9
    at async https://example.com/ngsw-worker.js:519:9
    at async https://example.com/ngsw-worker.js:519:9
    at async https://example.com/ngsw-worker.js:519:9
    at async https://example.com/ngsw-worker.js:519:9
    at async https://example.com/ngsw-worker.js:519:9

Minimal Reproduction

• Bundle an PWA with esbuild
• install pwa
• push new version

Exception or Error

Hash mismatch (cacheBustedFetchFromNetwork): https://example.com/favicon.ico: expected f27ed357f17b129a31a20512c7d76684d4ef1ffe, got ba16d4dfe88f32b39e8bcbbcae7f00ef7d4af8b2 (after cache busting)
Error: Hash mismatch (cacheBustedFetchFromNetwork): https://example.com/favicon.ico: expected f27ed357f17b129a31a20512c7d76684d4ef1ffe, got ba16d4dfe88f32b39e8bcbbcae7f00ef7d4af8b2 (after cache busting)
    at PrefetchAssetGroup.cacheBustedFetchFromNetwork (https://example.com/ngsw-worker.js:474:21)
    at async PrefetchAssetGroup.fetchFromNetwork (https://example.com/ngsw-worker.js:449:19)
    at async PrefetchAssetGroup.fetchAndCacheOnce (https://example.com/ngsw-worker.js:428:21)
    at async https://example.com/ngsw-worker.js:528:9
    at async https://example.com/ngsw-worker.js:519:9
    at async https://example.com/ngsw-worker.js:519:9
    at async https://example.com/ngsw-worker.js:519:9
    at async https://example.com/ngsw-worker.js:519:9
    at async https://example.com/ngsw-worker.js:519:9
    at async https://example.com/ngsw-worker.js:519:9

Your Environment

Angular CLI: 16.0.1
Node: 18.16.0
Package Manager: npm 9.5.1
OS: linux x64

Angular: 16.0.1
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, material, platform-browser
... platform-browser-dynamic, router, service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1600.1
@angular-devkit/build-angular   16.0.1
@angular-devkit/core            16.0.1
@angular-devkit/schematics      16.0.1
@schematics/angular             16.0.1
rxjs                            7.8.1
typescript                      5.0.4

Anything else relevant?

No response

[alexfriesen]

Awesome! Thanks guys

[angular-automatic-lock-bot]

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.}