Angular service-worker scope encountered an error during installation

Question

I am trying to use the Angular service worker but I get an error when trying to use it.

Those are my versions:

Angular CLI: 15.2.0
Node: 16.18.1
Package Manager: npm 8.19.2
OS: linux x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1502.0
@angular-devkit/build-angular   15.2.0
@angular-devkit/core            15.2.0
@angular-devkit/schematics      15.2.0
@schematics/angular             15.2.0
rxjs                            6.6.7
typescript                      4.8.4

When I try to use the swPush in a function:

  subscribeToNotifications() {
    console.log('subscribeToNotifications: ');
    this.swPush.requestSubscription({
      serverPublicKey: VAPID.publicKey
    })
      .then(sub => {
        console.log('User accepts: ', sub);
        this.alertService.success('Your browser will show up our notifications', AlertOptions.options)
      })
      .catch(err => console.error("Could not subscribe to notifications", err));
  }

Then I get this error:

Service worker registration failed with: TypeError: ServiceWorker script at http://localhost:<port>/<out-path>/ngsw-worker.js for scope http://localhost:<port>/<out-path>/ encountered an error during installation.

I have follow the official guide posted here, but I can't get this to work.

The ngsw.json and the ngsw-worker.js are generated in the path set in the angular.json > outputPath. Let's called it out-path.

The files angular.json and package.json seem to be overwritten correctly, and my app.module.ts looks like this:

...
        OverlayModule,
        ServiceWorkerModule.register('/<out-path>/ngsw-worker.js', {
          enabled: true, // should be environment.production
          // Register the ServiceWorker as soon as the application is stable
          // or after 30 seconds (whichever comes first).
          registrationStrategy: 'registerWhenStable:30000'
        })
...

All configuration files, seems to be fine, but I cannot get the service-worker register for some reason.

I am launching the app with ng serve --proxy-config proxy.conf.js. I would like to run this in Dev mode, but if someone knows how to get this work in production, it would be fine as well.

Update

I have upgraded Angular from v13 to the latest v15.0.2.

Richers

Answer 1

It is not possible to use a service worker in dev mode. I encorage you (future readers) to take a look to this other answer for understanding the concept of a service worker.

My files had been generated successfully, the problem was with the scope. You should NOT use the out-path of the angular.json in the register method but the --base-href that you use when building the project. That href is the route from the / of your server to the path where you host your application on that server.

So if you build your project with:

ng build \
  --configuration <your-profile> \
  --base-href /<path-to-your-app>/

Note: You should put "path-to-your-app" in between forward slashes.

Then, in the app.module.ts you should have something like this:

...
        OverlayModule,
        ServiceWorkerModule.register('/<path-to-your-application>/ngsw-worker.js', {
          enabled: true, // should be environment.production
          // Register the ServiceWorker as soon as the application is stable
          // or after 30 seconds (whichever comes first).
          registrationStrategy: 'registerWhenStable:30000'
        })
...

Richers