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

Created on 13 Sep 2018  路  8Comments  路  Source: angular/angular-cli

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
schematicangular repro steps
Source
picture playground

Most helpful comment

@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?

picture ricardoSa84 on 2 Nov 2018
👍2

All 8 comments

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.

alan-agius4 picture alan-agius4 on 13 Sep 2018

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.

playground picture playground on 19 Sep 2018

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

clydin picture clydin on 20 Sep 2018

@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/[email protected]
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
alan-agius4 picture alan-agius4 on 19 Oct 2018

@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/[email protected]
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 [email protected] 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 [email protected] 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.
playground picture playground on 19 Oct 2018

@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?

ricardoSa84 picture ricardoSa84 on 2 Nov 2018
👍2

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

barunantony picture barunantony on 26 Nov 2018
👍1

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._

angular-automatic-lock-bot[bot] picture angular-automatic-lock-bot[bot] on 9 Sep 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

MateenKadwaikar picture MateenKadwaikar  路  3Comments
daBishMan picture daBishMan  路  3Comments
IngvarKofoed picture IngvarKofoed  路  3Comments
hareeshav picture hareeshav  路  3Comments
donaldallen picture donaldallen  路  3Comments