ng add @angular/pwa --project test-project failed to update package.json when application is under projects folder

[playground]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Command (mark with an x)

- [ ] new
- [ ] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [x] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

npm v6.4.0

Angular CLI: 6.2.1
Node: 9.4.0
OS: darwin x64
Angular: 6.1.7
... animations, common, compiler, compiler-cli, core, elements
... forms, http, language-service, platform-browser
... platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.6.8
@angular-devkit/build-angular      0.6.8
@angular-devkit/build-ng-packagr   0.6.8
@angular-devkit/build-optimizer    0.6.8
@angular-devkit/core               0.6.8
@angular-devkit/schematics         0.8.1
@angular/cdk                       6.4.7
@angular/cli                       6.2.1
@angular/flex-layout               6.0.0-beta.17
@angular/material                  6.4.7
@angular/pwa                       0.8.1
@ngtools/json-schema               1.1.0
@ngtools/webpack                   6.0.8
@schematics/angular                0.8.1
@schematics/update                 0.8.1
ng-packagr                         3.0.0
rxjs                               6.3.2
typescript                         2.9.2
webpack                            4.8.3

MacOS High Sierra

Repro steps

ng add @angular/pwa --project test-project

The log given by the failure

npm ERR! file /my-project/package.json
npm ERR! code EJSONPARSE
npm ERR! JSON.parse Failed to parse json
npm ERR! JSON.parse Unexpected token 
npm ERR! JSON.parse  in JSON at position 1205 while parsing '{
npm ERR! JSON.parse   "name": "my-project",
npm ERR! JSON.parse   "version": "0.0'
npm ERR! JSON.parse Failed to parse package.json data.
npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript.

Desired functionality

Should update package.json, but it's throwing the above errors when attempts to update package.json.
Looks like it's inserting "@angular/service-worker": "^6.1.7", in between the word "ro uter"

  "dependencies": {
    "@angular/animations": "^6.1.7",
    "@angular/cdk": "^6.4.7",
    "@angular/common": "^6.1.7",
    "@angular/compiler": "^6.1.7",
    "@angular/core": "^6.1.7",
    "@angular/elements": "^6.1.7",
    "@angular/flex-layout": "^6.0.0-beta.16",
    "@angular/forms": "^6.1.7",
    "@angular/http": "^6.1.7",
    "@angular/material": "^6.4.7",
    "@angular/platform-browser": "^6.1.7",
    "@angular/platform-browser-dynamic": "^6.1.7",
    "@angular/pwa": "^0.8.1",
    "@angular/ro
    "@angular/service-worker": "^6.1.7",uter": "^6.1.7",
    "@webcomponents/custom-elements": "^1.1.2",
    "cookies": "^0.7.1",
    "core-js": "^2.5.4",
    "crypto-js": "^3.1.9-1",
    "document-register-element": "1.8.1",
    "lodash-es": "^4.17.10",
    "material-design-icons": "^3.0.1",
    "ng-simple-slideshow": "^1.2.4",
    "ngx-cookie-service": "^1.0.10",
    "profanity-filter": "^0.2.1",
    "require": "^2.4.20",
    "rxjs": "^6.3.2",
    "rxjs-compat": "^6.2.0",
    "simplewebrtc": "^3.0.1",
    "webrtc-adapter": "^6.2.1",
    "zone.js": "^0.8.26"
  },

After running "ng add @angular/pwa --project test-project"

ng -v shows

Angular CLI: 6.2.1
Node: 9.4.0
OS: darwin x64
Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.8.1
@angular-devkit/core         0.8.1
@angular-devkit/schematics   <error>
@schematics/angular          <error>
@schematics/update           <error>
rxjs                         6.2.2

[alan-agius4]

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[playground]

Hi @alan-agius4

ng add @angular/pwa --project test-project works fine if it's at the root meaning it's under the src folder rather than under projects/test-project. It failed if it's under projects folder.

[clydin]

Looks like this is the relevant line of code: https://github.com/angular/angular-cli/blob/master/packages/schematics/angular/service-worker/index.ts#L70

[alan-agius4]

@playground are you still able to reproduce the issue with version 7?

I followed these commands and I was unable to replicate.

ng new foo-one
cd foo-one
ng g app foo-two
ng add @angular/pwa --project foo-two

Final part of the log

+ @angular/pwa@0.10.1
added 72 packages in 9.793s
Installed packages for tooling via npm.
CREATE projects/foo-two/ngsw-config.json (441 bytes)
CREATE projects/foo-two/src/manifest.json (1071 bytes)
CREATE projects/foo-two/src/assets/icons/icon-128x128.png (1253 bytes)
CREATE projects/foo-two/src/assets/icons/icon-144x144.png (1394 bytes)
CREATE projects/foo-two/src/assets/icons/icon-152x152.png (1427 bytes)
CREATE projects/foo-two/src/assets/icons/icon-192x192.png (1790 bytes)
CREATE projects/foo-two/src/assets/icons/icon-384x384.png (3557 bytes)
CREATE projects/foo-two/src/assets/icons/icon-512x512.png (5008 bytes)
CREATE projects/foo-two/src/assets/icons/icon-72x72.png (792 bytes)
CREATE projects/foo-two/src/assets/icons/icon-96x96.png (958 bytes)
UPDATE angular.json (7898 bytes)
UPDATE package.json (1386 bytes)
UPDATE projects/foo-two/src/app/app.module.ts (525 bytes)
UPDATE projects/foo-two/src/index.html (468 bytes)

added 68 packages in 9.367s

[playground]

@alan-agius4 I just verified that ng add @angular/pwa for a project in v7 is working as expected. Thanks for your support.

ng add @angular/pwa --project my-project-sw
+ @angular/pwa@0.10.1
added 6 packages from 2 contributors and audited 47648 packages in 19.87s
found 0 vulnerabilities

Installed packages for tooling via npm.
CREATE projects/my-project-sw/ngsw-config.json (441 bytes)
CREATE projects/my-project-sw/src/manifest.json (1083 bytes)
CREATE projects/my-project-sw/src/assets/icons/icon-128x128.png (1253 bytes)
CREATE projects/my-project-sw/src/assets/icons/icon-144x144.png (1394 bytes)
CREATE projects/my-project-sw/src/assets/icons/icon-152x152.png (1427 bytes)
CREATE projects/my-project-sw/src/assets/icons/icon-192x192.png (1790 bytes)
CREATE projects/my-project-sw/src/assets/icons/icon-384x384.png (3557 bytes)
CREATE projects/my-project-sw/src/assets/icons/icon-512x512.png (5008 bytes)
CREATE projects/my-project-sw/src/assets/icons/icon-72x72.png (792 bytes)
CREATE projects/my-project-sw/src/assets/icons/icon-96x96.png (958 bytes)
UPDATE angular.json (8169 bytes)
UPDATE package.json (1453 bytes)
UPDATE projects/my-project-sw/src/app/app.module.ts (525 bytes)
UPDATE projects/my-project-sw/src/index.html (473 bytes)
npm WARN codelyzer@4.3.0 requires a peer of @angular/compiler@>=2.3.1 <7.0.0 || >6.0.0-beta <7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN codelyzer@4.3.0 requires a peer of @angular/core@>=2.3.1 <7.0.0 || >6.0.0-beta <7.0.0 but none is installed. You must install peer dependencies yourself.

[ricardoSa84]

@alan-agius4 @playground
hi, trying to do that in ionic as it as been mentioned in several places but mine stops at Installed packages for tooling via npm.
No files created no changes made only to the package.json file any ideas?

[barunantony]

The fix was to first run 'ng update --all'... twice since the first round has a cryptic error:
Invalid rule result: Function().
the second time with no error.
running 'ng add @angular/pwa' then worked as expected

Thanks to Andrew, found this solution in Q&A of https://www.udemy.com/the-complete-guide-to-angular-2/learn/v4/t/lecture/5401674?start=210

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}