Angular service worker with webpack (without CLI)

Question

I've a pretty large angular project that is built using webpack (I'm working with Microsoft's template of ASP.NET core). Is there any way I can use @angular/service-worker?

I've already tried adding the package and importing it, but the service worker never gets built. There's no error, but I get nothing. A new CLI project built with the flag works as expected.

Answer 1

I was struggling with this as well since i'm not using the CLI. I managed to get it working by including these scripts in npm scripts.

    "ngsw-config": "node_modules/.bin/ngsw-config dist src/ngsw-config.json",
    "ngsw-copy": "cp node_modules/@angular/service-worker/ngsw-worker.js dist/",
    "build-ngsw": "npm run ngsw-config && npm run ngsw-copy"

Include "build-ngsw" in your production build script.

The first script creates the ngsw.json file in your dist folder by reading the ngsw-config.json (which you'll have to create). The second script copies the actual angular service worker from @angular/service-worker to the dist folder.

Import and register the service worker. See step 3 in this tutorial Angular Service Worker Getting Started.