Nx: service worker doesn't work with Angular apps in Nx workspace

[ahnpnl]

Prerequisites

• [x] I am running the latest version
• [x] I checked the documentation and found no answer
• [x] I checked to make sure that this issue has not already been filed
• [x] I'm reporting the issue to the correct repository (not related to Angular, AngularCLI or any dependency)

Expected Behavior

Should be able to register service worker for an Angular app.

Current Behavior

There are 2 things I observed:

• production build doesn't generate ngsw-worker.js in dist/apps/<app_name>
• when serving production build using a local http server, service worker isn't registered (because of missing ngsw-worker.js), therefore service worker for app doesn't work.

Failure Information (for bugs)

I tested with 2 ways of generating an Nx workspace, either with Nx CLI or Angular CLI, both resolved in the same behaviors like described ones above.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. Clone repo https://github.com/ahnpnl/nx-sw-bug
2. Install dependencies with yarn.
3. Run nx build.
4. Run yarn sworker.
5. Open Chrome in incognito mode, open Chrome Dev Tools, open Network tab
6. Go to http://localhost:8080/index.html.
7. Observe in Network tab that ngsw-worker.js isn't loaded.
8. Check dist/apps/myapp and observe that ngsw-worker.js isn't there.

Context

Please provide any relevant information about your setup:

• version of Nx used: 8.4.12
• 3rd-party libraries and their versions: N.A.
• and most importantly - a use-case that fails

Example repo at: https://github.com/ahnpnl/nx-sw-bug

Failure Logs

N.A.

Other

• This bug doesn't occur to a project which is generated by pure Angular CLI (not via Nx).
• I noticed @angular/pwa was installed with version 0.802.2, I see the version is different from @angular-devkit/build-angular. So I tried to install @angular/pwa with the same version as @angular-devkit/build-angular but this didn't help either.

[mehrad-rafigh]

@ahnpnl @vsavkin I cannot reproduce this issue.
I created a new workspace with npx --ignore-existing create-nx-workspace myworkspace-test-service-worker and select angular as preset.
After that I installed the pwa related packages. ng add @angular/pwa --project=testing-pwa and then run ng build testing-pwa --configuration production
Looking inside the dist folder of my app, I can the see the ngsw-worker.js has beed created, along with some other files.

Would you please try it again @ahnpnl ? If you like, I can upload my workspace where I tested it.

[ahnpnl]

this only happens if choosing Nx CLI when generating a workspace. If choosing Angular CLI when generating a workspace, it works fine.

[mehrad-rafigh]

Please refer to your own issue https://github.com/nrwl/nx/issues/1730

The reason why it won't work, is that NX is NOT a copy of NG in some sort.
For the time being, please only use NX for react and web-components. If you need Angular related packages, please use the NG CLI.

[ahnpnl]

hi @mehrad-rafigh , I wonder nrwl has any tools to switch a workspace generated by Nx CLI to a workspace generated by Angular CLI ? That would be convenient and more flexible for users.

[vsavkin]

Hey folks!

Nx CLI doesn't support the add command. But if you look at the changes made by ng add @angular/pwa --project=testing-pwa and apply those manually to your Nx CLI workspace, the pwa stuff should work.

If you want to change your workspace to use the Angular CLI, you can do it by:

• Adding @angular/cli to package.json
• Renaming workspace.json into angular.json

And you should be good to go.

@ahnpnl We don't provide any tools to move from the standalone version of Nx to the Angular CLI one at the moment. I think going in the other direction is probably more common, where you start with Angular and then want to go to a framework-agnostic setup, so you can add React and Node. Currently, you have to manually rename the config file and patch package.json.

[ahnpnl]

Thank you! I will try that.

[vsavkin]

Folks. I'm going to close this issue.

If the pwa package doesn't work in an Angular-CLI-powered Nx workspace, please reopen it. And we will take a look.

[tayambamwanza]

Folks. I'm going to close this issue.

If the pwa package doesn't work in an Angular-CLI-powered Nx workspace, please reopen it. And we will take a look.

Hi just leaving this for anyone who may run into this issue as well, for me I had to remove sideEffects: false from package.json.