Angular 17 with PWA fail always updating with "TOO MANY REDIRECTS"

[hittten]

Which @angular/* package(s) are the source of the bug?

service-worker

Is this a regression?

Yes

Description

steps to recreate the error

1. git clone https://github.com/hittten/pwaApp.git and npm i
2. run firebase init hosting

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: your-project-id (your-project-id)
i  Using project your-project-id (your-project-id)

=== Hosting Setup
? Detected an existing Angular codebase in the current directory, should we use this? Yes
? In which region would you like to host server-side content, if applicable? europe-west1 (Belgium)
? Set up automatic builds and deploys with GitHub? No

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

3. run firebase deploy
4. visit https://your-project-id.web.app
5. open the Javascript console and make sure that the network and application tabs are with the correct checkboxes:

6. run firebase deploy again and after full deployment reloads the page. You will see everything as expected and with the update message
7. edit src/app/app.component.ts and change the title property to a random string
8. run firebase deploy again and after full deployment reloads the page.
9. you will see the error:

Please provide a link to a minimal reproduction of the bug

https://github.com/hittten/pwaApp

Please provide the exception or error you saw

Response not Ok (fetchAndCacheOnce): request for https://your-project-id.web.app/index.html returned response 504 Gateway Timeout
Error: Response not Ok (fetchAndCacheOnce): request for https://your-project-id.web.app/index.html returned response 504 Gateway Timeout
    at PrefetchAssetGroup.fetchAndCacheOnce (https://your-project-id.web.app/ngsw-worker.js:432:17)
    at async https://your-project-id.web.app/ngsw-worker.js:535:9
    at async https://your-project-id.web.app/ngsw-worker.js:521:9
    at async https://your-project-id.web.app/ngsw-worker.js:521:9
    at async https://your-project-id.web.app/ngsw-worker.js:521:9
    at async https://your-project-id.web.app/ngsw-worker.js:521:9
    at async PrefetchAssetGroup.initializeFully (https://your-project-id.web.app/ngsw-worker.js:520:7)
    at async https://your-project-id.web.app/ngsw-worker.js:924:11
    at async AppVersion.initializeFully (https://your-project-id.web.app/ngsw-worker.js:923:9)
    at async Driver.setupUpdate (https://your-project-id.web.app/ngsw-worker.js:1623:9)
(anonymous) @ main-QZDSPL4N.js:7
next @ main-QZDSPL4N.js:3
_next @ main-QZDSPL4N.js:3
next @ main-QZDSPL4N.js:3
(anonymous) @ main-QZDSPL4N.js:3
_next @ main-QZDSPL4N.js:3
next @ main-QZDSPL4N.js:3
(anonymous) @ main-QZDSPL4N.js:3
bt @ main-QZDSPL4N.js:3
next @ main-QZDSPL4N.js:3
_next @ main-QZDSPL4N.js:3
next @ main-QZDSPL4N.js:3
(anonymous) @ main-QZDSPL4N.js:3
_next @ main-QZDSPL4N.js:3
next @ main-QZDSPL4N.js:3
(anonymous) @ main-QZDSPL4N.js:3
_next @ main-QZDSPL4N.js:3
next @ main-QZDSPL4N.js:3
a @ main-QZDSPL4N.js:3
invokeTask @ polyfills-RT5I6R6G.js:1
onInvokeTask @ main-QZDSPL4N.js:7
invokeTask @ polyfills-RT5I6R6G.js:1
runTask @ polyfills-RT5I6R6G.js:1
invokeTask @ polyfills-RT5I6R6G.js:1
O @ polyfills-RT5I6R6G.js:2
Z @ polyfills-RT5I6R6G.js:2
B @ polyfills-RT5I6R6G.js:2

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 17.3.1
Node: 20.11.1
Package Manager: npm 10.5.0
OS: darwin arm64

Angular: 17.3.1
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
... service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.1
@angular-devkit/build-angular   17.3.1
@angular-devkit/core            17.3.1
@angular-devkit/schematics      17.3.1
@schematics/angular             17.3.1
rxjs                            7.8.1
typescript                      5.4.3
zone.js                         0.14.4

Anything else?

The error appears when you edit a file, if you deploy multiple versions with the same code without modifying anything, all the updates will be executed as they should.

[hiepxanh]

I have the same issue, wonder is that esbuild cause this broken? I think it relevant to SSR file routing

[hiepxanh]

ok I found the root of problem @hittten

 const { protocol, originalUrl, baseUrl, headers } = req;
  let newProtocol = protocol === 'http' ? 'https' : 'https';
  const renderResult = commonEngine.render({
    bootstrap,
    documentFilePath: indexHtml,
    url: `${newProtocol}://${headers.host}${originalUrl}`,

The problem is: the protocol at client request is follow state at server render, and the server is rendering as http, because my app sitting behind a proxy. so it cause 308 redirect loop, using force https to make sure it render at server as https instead of auto could solve your problem

[hiepxanh]

hmhm, seem not cause by PWA, since some how esbuild handle server and make chunk not load as expect, event I'm not doing anything on cloudflare, I guest it come from how angular universal handle the request maybe it forget to turn http or https on.
I'm using angular 17.3.0 now. Already go though 9 years since AngularJS with this girl and this is first time she is not acting as I expect haha

[hiepxanh]

ok, found the root issue come from vite vitejs/vite#11804