Angular PWA missing ngsw.json and ngsw-worker file

Question

I have a problem with @angular/pwa. when I am building in production mode I am not getting ngsw-worker.js and ngsw.json files in my dist folder.

the pwa version am using is:

@angular/pwa: ^0.13.8
@angular/service-worker: ~7.1.0
@angular version 7

Thanks in advance

Ruvalcaba

In angular.json have (configuation setting) do you have "serviceWorker": true – Mendicity

Yes I do @Mendicity – Ruvalcaba

what build command are you using exactly? Can you display the output of the dist directory as a screen shot? – Mendicity

You can use this answer: https://mcmap.net/q/628369/-after-angular-6-update-ng-build-prod-yields-quot-error-expected-to-find-an-ngsw-config-json-configuration-file-quot – Analgesic

Answer 1

This answer is only relevant when:

• you use nrwl/nx
  • which decorates the ng command
• and angular configuration composition:
  i.e. ng build client --configuration=production,variant

nx version 11

Now the workaround for version 10 (see below) does not work anymore!

• closed-nx#4296: Cannot pass in multiple configurations using -c since nx 11
• actual fix should be handled in: nx#2839: NX does not handle multiple configurations: nx run app:build --configuration=production,stage-env

a workaround can be to opt-out of the nx ng-cli-decorate patch

quote from nx#4452:

To opt out of this patch:

Replace occurrences of nx with ng in your package.json Remove the script from your postinstall script in your package.json Delete and reinstall your node_modules

nx version 10

To fix the issue (we use nx version 10) we replaced:

• ng build client --configuration=production,variant with
• nx build client -c=production,variant

The problem was, that nx did not pass the configuration correctly to ng and thus ng did not build the production configuration (thus no PWA/service-worker)

Links to nx issues:

• #2839: NX does not handle multiple configurations: nx run app:build --configuration=production,stage-env
• #4296: Cannot pass in multiple configurations using -c since nx 11

Dichlorodiphenyltrichloroethane

Answer 2

You can copy the files from the node_modules folder (from a prompt in your project folder):

cp node_modules/@angular/service-worker/ngsw-worker.js ./src/ngsw-worker.js
cp node_modules/@angular/service-worker/ngsw-config.json ./ngsw-config.json

You may also need to make sure your service worker is registered. Nice presentation on the subject at: https://javascript-conference.com/wp-content/uploads/2017/12/Automatic_Progressive_Web_Apps_using_Angular_Service_Worker_Maxim_Salnikov.pdf

Ashtray