Chunk loading errors when using SW + lazy loaded modules

🐞 bug report

Affected Package

Angular 11.x

Is this a regression?

I think so, never observed the issue with Angular 10

Description

We use Service Workers and lazy loaded modules in our application. What happens is that very often now, we get the “chunkLoadingError” when one version of the PWA is trying to fetch a lazy loaded module for a previous version.

So: deploy version A Make changes, deploy as version B

Close the browser, wait 10 mins, load the application again. When the application tries to load a chunk from the previous deployment A, it fails because naturally this chunk does not exist any longer.

We are of course using the Service Worker service swUpdate to get notifications when a new version is available. However, it seems sometimes not all lazy loaded chunks are updated when there is a new SW version.

We are using Ngrx/Store to subscribe and listen to the swUpdate service observables: available and the new unrecoverable :

 // Listen for new versions of application available
  newVersion$ = createEffect( () => this.swUpdate.available.pipe(
      map( () => this.swUpdate.activateUpdate()),
      switchMap( () => of(navigateAction([ '/', {outlets: { dialog: 'new-version' } } ])))
  ));

   // Listen for unrecoverable state from the service worker
   swUnrecoverable$ = createEffect( () => this.swUpdate.unrecoverable.pipe(
     map( event => {
       console.log('Service worker unrecoverable event, reloading application');
       window.location.reload();
     })
   ), { dispatch: false });

The problem is that it seems like doesn’t seem swUpdate.unrecoverable subscription is ever triggered. Maybe it’s a bug? Or am I doing something wrong? Thanks

🌍 Your Environment

Angular Version:

Angular: 11.0.3
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.901.7
@angular-devkit/build-angular   0.1100.3
@angular-devkit/core            9.1.7
@angular-devkit/schematics      11.0.3
@angular/cdk                    11.0.1
@angular/fire                   6.1.2
@angular/material               11.0.1
@nguniversal/builders           9.1.1
@nguniversal/express-engine     9.1.1
@schematics/angular             11.0.3
@schematics/update              0.1100.3
rxjs                            6.5.5
typescript                      4.0.5

Maybe important?

We use i18n to deploy 7 different versions of the application, each with its own service worker

[gkalpak]

Thx for reporting this, @spock123!

However, I am afraid the provided info doesn’t give use much to work with. The behavior you see could have many root causes, including:

• Incorrect SW configuration.
• Automatic server/proxy optiimization.
• Angular SW bug.

It would be best if you could provide a minimal reproduction. If that is not possible, then you could provide more information about your app and the behavior you see (for example, the SW config (both ngsw-config.json and the generated ngsw.json), exact error message in the console, the output of ngsw/state, etc.).

Other things that would help diagnose the problem would be a publicly available deployed version of the app and instrumenting the SW script to gather more info, such as the contents of the caches when the error occurs.

[angular-automatic-lock-bot[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.}