Nx: ng add @angular/pwa fails to find ngsw-config.json on angular cli to nx workspace

[matthewharwood]

ng new morningharwood --routing
ng generate universal --client-project morningharwood
ng generate app-shell --universal-project  --route=app-shell-path --client-project=morningharwood
ng add @angular/pwa --project morningharwood
ng build --prod
cd dist/morningharwood
http-server

Open up inspector go to appication tab and you'll see the service working working as intended.

Ok now lets convert to nx

ng add @nrwl/schematics --project morningharwood
npm install --save rxjs-compat 
ng build --prod

ng build --prod will fail and throw this error:

Error: Expected to find an ngsw-config.json configuration file in the /Users/mharwo/workspace/www/test/morningharwood/apps/morningharwood folder. Either provide one or disable Service Worker in your angular.json configuration file.
Error: Error: Expected to find an ngsw-config.json configuration file in the /Users/mharwo/workspace/www/test/morningharwood/apps/morningharwood folder. Either provide one or disable Service Worker in your angular.json configuration file.
    at SwitchMapSubscriber.host.exists.pipe.operators_1.switchMap.exists [as project] (/Users/mharwo/workspace/www/test/morningharwood/node_modules/@angular-devkit/build-angular/src/angular-cli-files/utilities/service-worker/index.js:91:19)
    at SwitchMapSubscriber._next (/Users/mharwo/workspace/www/test/morningharwood/node_modules/rxjs/internal/operators/switchMap.js:90:27)
    at SwitchMapSubscriber.Subscriber.next (/Users/mharwo/workspace/www/test/morningharwood/node_modules/rxjs/internal/Subscriber.js:103:18)
    at Observable.rxjs_1.Observable.obs [as _subscribe] (/Users/mharwo/workspace/www/test/morningharwood/node_modules/@angular-devkit/core/node/host.js:207:17)
    at Observable._trySubscribe (/Users/mharwo/workspace/www/test/morningharwood/node_modules/rxjs/internal/Observable.js:177:25)
    at Observable.subscribe (/Users/mharwo/workspace/www/test/morningharwood/node_modules/rxjs/internal/Observable.js:162:93)
    at SwitchMapOperator.call (/Users/mharwo/workspace/www/test/morningharwood/node_modules/rxjs/internal/operators/switchMap.js:69:23)
    at Observable.subscribe (/Users/mharwo/workspace/www/test/morningharwood/node_modules/rxjs/internal/Observable.js:159:22)
    at MapOperator.call (/Users/mharwo/workspace/www/test/morningharwood/node_modules/rxjs/internal/operators/map.js:62:23)
    at Observable.subscribe (/Users/mharwo/workspace/www/test/morningharwood/node_modules/rxjs/internal/Observable.js:159:22)
    at SwitchMapOperator.call (/Users/mharwo/workspace/www/test/morningharwood/node_modules/rxjs/internal/operators/switchMap.js:69:23)
    at Observable.subscribe (/Users/mharwo/workspace/www/test/morningharwood/node_modules/rxjs/internal/Observable.js:159:22)
    at SwitchMapOperator.call (/Users/mharwo/workspace/www/test/morningharwood/node_modules/rxjs/internal/operators/switchMap.js:69:23)
    at Observable.subscribe (/Users/mharwo/workspace/www/test/morningharwood/node_modules/rxjs/internal/Observable.js:159:22)
    at SwitchMapOperator.call (/Users/mharwo/workspace/www/test/morningharwood/node_modules/rxjs/internal/operators/switchMap.js:69:23)
    at Observable.subscribe (/Users/mharwo/workspace/www/test/morningharwood/node_modules/rxjs/internal/Observable.js:159:22)

I would guess the project doesnt transfer the ngsw-config.json

[michelcve]

Not sure if it's related to your problem. But I had the same error while migrating to Angular 6.

if you change
"ngswConfigPath": "/src/ngsw-config.json",
to
"ngswConfigPath": "src/ngsw-config.json",

in the angular.json (if I'm correct), and it should probably work again.

That was actually wrong, I removed the ngswConfigPath and moved the ngsw-config.js to the app's root directory.

See also: https://github.com/angular/angular-cli/issues/10357

[matthewharwood]

@michelcve 2 things, this is a fresh angular-cli 6 to nx workspace. And the new ng add @angular/pwa no longer adds ngswConfigPath, it is an old standard but maybe needed for nx builds.

Proof given by you link: https://github.com/angular/angular-cli/issues/10357

... I guess that's how service worker works implicitly within the new CLI.

or stackoverflow

So if we need the ngswConfigPath where does it go in nx's angular.json, it seems as if this caused errors for others.

[michelcve]

My apologies. I didn't have the code available to me during the weekend, so I gave some wrong advice.

I actually removed the ngswConfigPath from the projects->yourproject->architect->configurations section in the angular.js file, and moved the ngsw-config.json from the src dir to the app's root dir (so, one level up).

I know my case was different from yours, but perhaps it helps.

[matthewharwood]

@michelcve yeah the case is a bit different. But ng build —prod still cannot find the ngsw-config even when I manually add.

[Yonet]

@matthewharwood do you have a repo that we can take a look at?
There are multiple open related issues, unfortunately, this might take some time to fix.
pwa with angular 6 does not work #926

[matthewharwood]

@Yonet I've created a repo showcasing @angular/pwa working as intended in a vanilla angular-cli project on branch master. Then I converted the angular-cli project to an nx workspace, where it then fails, test on branch nx.

Step 1

Test the angular-cli app to see if @angular/pwa is working as intended.

repo: run from master branch

The recreation steps of this repo are verbatim, as follows:

ng new morningharwood --routing
ng generate universal --client-project morningharwood
ng generate app-shell --universal-project  --route=app-shell-path --client-project=morningharwood
ng add @angular/pwa --project morningharwood

You can confirm a working pwa with the following commands:

ng build --prod
cd dist/morningharwood
http-server // or any other local server you have.

Or heres a screenshot to confirm: https://imgur.com/a/lrnJ6Zp

Step2

Next we need to make this workspace an nx workspace

repo: run from nx branch

Or run these steps verbatim:

ng add @nrwl/schematics --project morningharwood
npm install --save rxjs-compat 
ng build --prod

An on the build you will get the

error:

Error: Expected to find an ngsw-config.json configuration file in the /Users/mharwo/workspace/www/test/morningharwood/apps/morningharwood folder. Either provide one or disable Service Worker in your angular.json configuration file.
Error: Error: Expected to find an ngsw-config.json configuration file in the /Users/mharwo/workspace/www/test/morningharwood/apps/morningharwood folder. Either provide one or disable Service Worker in your angular.json configuration file.
    at SwitchMapSubscriber.host.exists.pipe.operators_1.switchMap.exists [as project] (/Users/mharwo/workspace/www/test/morningharwood/node_modules/@angular-devkit/build-angular/src/angular-cli-files/utilities/service-worker/index.js:91:19)
    at SwitchMapSubscriber._next (/Users/mharwo/workspace/www/test/morningharwood/node_modules/rxjs/internal/operators/switchMap.js:90:27)
    at SwitchMapSubscriber.Subscriber.next (/Users/mharwo/workspace/www/test/morningharwood/node_modules/rxjs/internal/Subscriber.js:103:18)
    at Observable.rxjs_1.Observable.obs [as _subscribe] (/Users/mharwo/workspace/www/test/morningharwood/node_modules/@angular-devkit/core/node/host.js:207:17)
    at Observable._trySubscribe (/Users/mharwo/workspace/www/test/morningharwood/node_modules/rxjs/internal/Observable.js:177:25)
    at Observable.subscribe (/Users/mharwo/workspace/www/test/morningharwood/node_modules/rxjs/internal/Observable.js:162:93)
    at SwitchMapOperator.call (/Users/mharwo/workspace/www/test/morningharwood/node_modules/rxjs/internal/operators/switchMap.js:69:23)
    at Observable.subscribe (/Users/mharwo/workspace/www/test/morningharwood/node_modules/rxjs/internal/Observable.js:159:22)
    at MapOperator.call (/Users/mharwo/workspace/www/test/morningharwood/node_modules/rxjs/internal/operators/map.js:62:23)
    at Observable.subscribe (/Users/mharwo/workspace/www/test/morningharwood/node_modules/rxjs/internal/Observable.js:159:22)
    at SwitchMapOperator.call (/Users/mharwo/workspace/www/test/morningharwood/node_modules/rxjs/internal/operators/switchMap.js:69:23)
    at Observable.subscribe (/Users/mharwo/workspace/www/test/morningharwood/node_modules/rxjs/internal/Observable.js:159:22)
    at SwitchMapOperator.call (/Users/mharwo/workspace/www/test/morningharwood/node_modules/rxjs/internal/operators/switchMap.js:69:23)
    at Observable.subscribe (/Users/mharwo/workspace/www/test/morningharwood/node_modules/rxjs/internal/Observable.js:159:22)
    at SwitchMapOperator.call (/Users/mharwo/workspace/www/test/morningharwood/node_modules/rxjs/internal/operators/switchMap.js:69:23)
    at Observable.subscribe (/Users/mharwo/workspace/www/test/morningharwood/node_modules/rxjs/internal/Observable.js:159:22)

Reason:

When you run ng add @angular/pwa the schematic will add/update these files

CREATE ngsw-config.json (392 bytes)
CREATE src/assets/icons/icon-128x128.png (1253 bytes)
CREATE src/assets/icons/icon-144x144.png (1394 bytes)
CREATE src/assets/icons/icon-152x152.png (1427 bytes)
CREATE src/assets/icons/icon-192x192.png (1790 bytes)
CREATE src/assets/icons/icon-384x384.png (3557 bytes)
CREATE src/assets/icons/icon-512x512.png (5008 bytes)
CREATE src/assets/icons/icon-72x72.png (792 bytes)
CREATE src/assets/icons/icon-96x96.png (958 bytes)
CREATE src/manifest.json (1085 bytes)
UPDATE angular.json (4128 bytes)
UPDATE package.json (1438 bytes)
UPDATE src/app/app.module.ts (716 bytes)
UPDATE src/index.html (476 bytes)

Now under a nx workspace, the ngsw-config.json isn't able to be found by the ng build --prod This is got to be some kind of configuration inside of angular.json but I'm just not sure what the key value is and how to wire together nx and or angular-cli to re-link the ngsw-config.json. Also mentioned by @michelcve Stackoverflow that there is some implicit magic going on where you no longer need to configure the ngsw-config in angular.json but this fails in nx because that this magic link is broken.

Solution:
I'm pretty confident that @angular/pwa with nx will work. we just need nx to resolve thengsw-config.json when you run ng build --prod

[michelcve]

I checked the NX branch of your repo. Your ngsw-config.json is in the wrong directory. Instead of in the root, it should be in apps/morningharwood, as it is app specific.

[matthewharwood]

@michelcve ahh I feel so stupid ... thanks! It works now.
@Yonet I guess we should close this.

Side question for anyone: Are there any discussions on how to reconcile two or more schematics, like ng add @angular/pwa and ng add @nrwl/schematics. Esp with more to come like ngrx and universal. Seems pretty hard to solve without manual efforts (like this one) or authors collaborating.

[vsavkin]

@matthewharwood

how to reconcile two or more schematics, like ng add @angular/pwa and ng add @nrwl/schematics

Can you expand on this?

[matthewharwood]

@vsavkin I'm most concerned with the composition of these ng add commands. For example,
angular cli + pwa + nx will fail because the ngsw-config.json is misplaced. This scenerio is a small error but I can see these kind of problems getting worse. With the next batch of ng add commands coming out like ng add @angular/universal or ng add @ngrx/xxx there will likely be more manual fixing. Or what if, nx adds a new flag like ng add @nrwl/schematics --bazel. A bazel flag, could have no compatibilities with other schematics. I don't think theres a good solution but I was wondering if you're magical brain had any ideas on how this experience of composition of ng add commands could improve?

Blocked: repro needed:

Repoduction steps (failure in angular-cli + pwa + nx):

ng new morningharwood --routing
ng generate universal --client-project morningharwood
ng generate app-shell --universal-project  --route=app-shell-path --client-project=morningharwood
ng add @angular/pwa --project morningharwood
ng build --prod
cd dist/morningharwood
http-server

When kept in angular cli the service worker will work.
However, once you add nx:

ng add @nrwl/schematics --project morningharwood
ng build --prod

Build will fail. This is only because the ngsw-config.json is now in the wrong directory. Now this is easy to fix manually but it took me out like a few hours >_<.

[ndcunningham]

I tried this a similar setup only however i was already inside an nx-workspace from using @nrwl/schematics
nothing _service-worker_ related was created example:

CREATE ngsw-config.json (392 bytes)
CREATE src/assets/icons/icon-128x128.png (1253 bytes)
CREATE src/assets/icons/icon-144x144.png (1394 bytes)
CREATE src/assets/icons/icon-152x152.png (1427 bytes)
CREATE src/assets/icons/icon-192x192.png (1790 bytes)
CREATE src/assets/icons/icon-384x384.png (3557 bytes)
CREATE src/assets/icons/icon-512x512.png (5008 bytes)
CREATE src/assets/icons/icon-72x72.png (792 bytes)

So on inside my existing nx-workspace i did
ng g app my-pwa-app --service-worker No service-worker files were created
ng g app my-pwa-app => ng add @angular/pwa --project my-pwa-app
This added the service-worker dependency inside my package.json however thats all it did.

[vsavkin]

Are you using Nx 6?

CLI6 has an independent schematic called Service Worker. And it works with Nx 6. CLI6 no longer has the "--service-worker" flag.

Btw, it's easy to play with these using Angular Console (https://angularconsole.com/).

Let me know if it makes sense and if you have an issue using the service worker schematic.

[matthewharwood]

@vsavkin pretty sure angular console fixes this problem because it's now scoped to the schematics that angular console offers. Great solve @vsavkin and team.

[ndcunningham]

@vsavkin with the advent of the Angular Console this is no longer an issue for me as it simplifies a lot things and in general a visual experience makes it really easy to use.
Thanks.

[matthewharwood]

@Yonet @vsavkin This seems to be an issue again when following @ndcunningham steps. create a new nx workspace, nx application, and try to add pwa using terminal command:

matth@DESKTOP-PUQ7U15 MINGW64 ~/WebstormProjects/webmaster/morningharwood (master)
$ ng add @angular/pwa --project morningharwood
Installing packages for tooling via npm.
npm WARN @ngrx/[email protected] requires a peer of @angular/core@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ngrx/[email protected] requires a peer of @angular/common@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ngrx/[email protected] requires a peer of @angular/core@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ngrx/[email protected] requires a peer of @angular/router@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ngrx/[email protected] requires a peer of @angular/core@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @angular/[email protected]
added 67 packages and updated 1 package in 14.391s
Installed packages for tooling via npm.
Maximum call stack size exceeded

Cannot use angular console because doesn't know the project name

UPDATE:
This maybe because the flag is now --clientProject not --project