NGSW based Service Worker doesn't work in ng8 with differential builds

[elylucas]

🐞 Bug report

Command (mark with an x)

- [ ] new
- [x] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Description

When doing a production build with differential builds (target = es2015 in tsconfig), the service worker does not properly serve up cached esm js files. It throws an error (below in the error section) in the browser console window.

Turning off differential builds (by settings target to es5 in tsconfig) fixes the issue.

Note, this issue only appears to be in Chrome (see the end of the issue).

🔬 Minimal Reproduction

Create a new app:
ng new ng8-pwa-test (I added routing and selected CSS)

Update the bits to make sure on latest:
ng upgrade @angular/cli @angular/core

Add NGSW:
ng add @angular/pwa

Do a prod build:
ng build --prod

Use a local web server to serve up the dist/ng8-pwa-test (using (https://www.npmjs.com/package/local-web-server)[local-web-server myself]):
ws --spa index.html --static.maxage -1 -p 8080 -z -d dist/ng8-pwa-test

Visit http://localhost:8080, open dev tools and verify the service worker is running on the Application tab. Maybe refresh a few times to make sure everything is nice and primed.

Go offline via the Service Worker tab.

Refresh, and get the error down below in the error section.

Now, go into tsconfig.json and turn off differential builds by setting the target to "es5".

Do another prod build:
ng build --prod

Restart the web server:
ws --spa index.html --static.maxage -1 -p 8080 -z -d dist/ng8-pwa-test

Go back to the browser, unregister the existing service worker, clear out any cache, go back online and see the page again.

Now, go back offline, hit refresh, and see the es5 builds are properly being served from the sw cache.

Heres a link to a project already prepped https://github.com/elylucas/ng8-pwa-test

🔥 Exception or Error

ngsw-worker.js:596 Uncaught (in promise) Error: Response not Ok (fetchAndCacheOnce): request for http://localhost:8080/polyfills-es2015.e4a1185e6871d06f842f.js returned response 504 Gateway Timeout
    at PrefetchAssetGroup. (ngsw-worker.js:596)
    at Generator.next ()
    at fulfilled (ngsw-worker.js:320)
(anonymous) @ ngsw-worker.js:596
fulfilled @ ngsw-worker.js:320
localhost/:16 GET http://localhost:8080/main-es2015.a547e075e866b7c26e38.js net::ERR_FAILED
ngsw-worker.js:596 Uncaught (in promise) Error: Response not Ok (fetchAndCacheOnce): request for http://localhost:8080/main-es2015.a547e075e866b7c26e38.js returned response 504 Gateway Timeout
    at PrefetchAssetGroup. (ngsw-worker.js:596)
    at Generator.next ()
    at fulfilled (ngsw-worker.js:320)

🌍 Your Environment

Angular CLI: 8.2.0
Node: 10.15.3
OS: darwin x64
Angular: 8.2.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.802.0
@angular-devkit/build-angular     0.802.0
@angular-devkit/build-optimizer   0.802.0
@angular-devkit/build-webpack     0.802.0
@angular-devkit/core              8.2.0
@angular-devkit/schematics        8.2.0
@angular/pwa                      0.802.0
@ngtools/webpack                  8.2.0
@schematics/angular               8.2.0
@schematics/update                0.802.0
rxjs                              6.5.2
typescript                        3.5.3
webpack                           4.38.0

Anything else relevant?
During testing, I noted that this issue only seems to happen in Chrome (in on v76). I tried in Firefox and Safari and they both seemed to work, but the devtools there aren't as good so not sure if I was going offline properly (i just killed the local server).

Therefore, this could be an issue in Chrome and ESM module loading in service workers.

Im also on Mac OSX Mojava.

[alan-agius4]

Hi @elylucas, I downloaded your reproduction and tried it locally and I was not able to replicate the exact issue that you are reporting. I am using Chrome version Version 76.0.3809.100 on Windows.

That being said, I can see a different error which is for the manifest.webmanifest, which I think we should be adding to the ngsw.json

[ahnpnl]

hi, I have similar issue like @elylucas . However, it randomly happens, sometimes I can reproduce it, sometimes I can't

[CharlyRipp]

Currently facing this issue as well. Happens consistently between builds.
Produce a production build, load it, let the worker cache.
Produce a new production build, then attempt to load it - will receive the fetchAndCacheOnce method error.

Once you receive this error, refreshing the browser then fetches the latest and everything is happy.
Currently looking at implementing a hack into the ngsw-worker.js to just refresh instead of throwing the error until this is resolved.

[pturner1989]

Also having this issue on a new project.

[springandangular]

It seems for me using NPM package http-server instead of NPM package ws to host my Angular 8 production builds resolved the issue in testing.

[hansaliyad1]

Hello! This issue is still persist in my environment. I will really appreciate if fix is available.

[bhuber2010]

Just ran into this also... target change to es5 from es2015 seems to have "fixed" it but a real fix would be nice. Also a simple reload after ngsw has download the new files also allows the app to load, which is very strange and seems like ngsw-worker.js has some interaction with Chrome (if this indeed only happens on Chrome, I haven't tested that).

[alan-agius4]

This issue is now obsolete since differential loading will be removed in the next major version. See: #21467

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