Attempting to add @angular/pwa via yarn package manage fails.

[kosso]

Command

add

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

After creating a brand new app with --package-manager=yarn, then entering the project direct then entering ng add @angular/pwa always fails.

Retrying this procedure without yarn works.

Minimal Reproduction

Create a new app, and include --package-manager=yarn
Cd into app foilder.
Try ng ss @angular/pwa

• start shouting at the screen.

Exception or Error

Your Environment

All versions

Anything else relevant?

No response

[alan-agius4]

Hi @kosso, I am unable to replicate this. Can you please provide the output of ng version and the error you are seeing?

$ ng new test-pwa --package-manager=yarn
✔ Which stylesheet format would you like to use? CSS             [ https://developer.mozilla.org/docs/Web/CSS                     ]
✔ Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No
CREATE test-pwa/README.md (1470 bytes)
CREATE test-pwa/.editorconfig (314 bytes)
CREATE test-pwa/.gitignore (587 bytes)
CREATE test-pwa/angular.json (2643 bytes)
CREATE test-pwa/package.json (1001 bytes)
CREATE test-pwa/tsconfig.json (915 bytes)
CREATE test-pwa/tsconfig.app.json (424 bytes)
CREATE test-pwa/tsconfig.spec.json (434 bytes)
CREATE test-pwa/.vscode/extensions.json (130 bytes)
CREATE test-pwa/.vscode/launch.json (470 bytes)
CREATE test-pwa/.vscode/tasks.json (938 bytes)
CREATE test-pwa/src/main.ts (250 bytes)
CREATE test-pwa/src/index.html (293 bytes)
CREATE test-pwa/src/styles.css (80 bytes)
CREATE test-pwa/src/app/app.component.css (0 bytes)
CREATE test-pwa/src/app/app.component.html (19903 bytes)
CREATE test-pwa/src/app/app.component.spec.ts (922 bytes)
CREATE test-pwa/src/app/app.component.ts (284 bytes)
CREATE test-pwa/src/app/app.config.ts (310 bytes)
CREATE test-pwa/src/app/app.routes.ts (77 bytes)
CREATE test-pwa/public/favicon.ico (15086 bytes)
✔ Packages installed successfully.
    Successfully initialized git.

$ cd test-pwa

$ ng add @angular/pwa
✔ Determining Package Manager
  › Using package manager: yarn
✔ Searching for compatible package version
  › Found compatible package version: @angular/pwa@19.2.5.
✔ Loading package information from registry
✔ Confirming installation
✔ Installing package in temporary location
CREATE ngsw-config.json (639 bytes)
CREATE public/manifest.webmanifest (1284 bytes)
CREATE public/icons/icon-128x128.png (2875 bytes)
CREATE public/icons/icon-144x144.png (3077 bytes)
CREATE public/icons/icon-152x152.png (3293 bytes)
CREATE public/icons/icon-192x192.png (4306 bytes)
CREATE public/icons/icon-384x384.png (11028 bytes)
CREATE public/icons/icon-512x512.png (16332 bytes)
CREATE public/icons/icon-72x72.png (1995 bytes)
CREATE public/icons/icon-96x96.png (2404 bytes)
UPDATE angular.json (2694 bytes)
UPDATE package.json (1042 bytes)
UPDATE src/app/app.config.ts (536 bytes)
UPDATE src/index.html (475 bytes)
✔ Packages installed successfully.

[kosso]

Could you also provide your ng version output for me to compare? (I have just downgraded to angular/cli@16 to test my sanity.. I will try to go to v19 again later)

Also which version of yarn you're using. thanks. (I am on 3.6.0)

So many things just are not working when using yarn, for me.
So many angry hours ...

[kosso]

I am also seeing complaints about rimraf and glob being very outdated. ( I think via karma and the @angular-devkit/build-angular, after runningnpm why rimraf` I ca see karma using rimraf 3.0.2)

[alan-agius4]

I tried with yarn 3.2.0 and was able to run ng add @angular/pwa

$ ng v

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 19.2.5
Node: 20.18.1
Package Manager: yarn 3.2.0
OS: linux x64

Angular: 19.2.4
... common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1902.5
@angular-devkit/build-angular   19.2.5
@angular-devkit/core            19.2.5
@angular-devkit/schematics      19.2.5
@angular/cli                    19.2.5
@schematics/angular             19.2.5
rxjs                            7.8.2
typescript                      5.7.3
zone.js                         0.15.0
    
$ ng add @angular/pwa
✔ Determining Package Manager
  › Using package manager: yarn
✔ Searching for compatible package version
  › Found compatible package version: @angular/pwa@19.2.5.
✔ Loading package information from registry
✔ Confirming installation
✔ Installing package in temporary location
CREATE ngsw-config.json (639 bytes)
CREATE public/manifest.webmanifest (1286 bytes)
CREATE public/icons/icon-128x128.png (2875 bytes)
CREATE public/icons/icon-144x144.png (3077 bytes)
CREATE public/icons/icon-152x152.png (3293 bytes)
CREATE public/icons/icon-192x192.png (4306 bytes)
CREATE public/icons/icon-384x384.png (11028 bytes)
CREATE public/icons/icon-512x512.png (16332 bytes)
CREATE public/icons/icon-72x72.png (1995 bytes)
CREATE public/icons/icon-96x96.png (2404 bytes)
UPDATE angular.json (2653 bytes)
UPDATE package.json (1077 bytes)
UPDATE src/app/app.config.ts (536 bytes)
UPDATE src/index.html (476 bytes)
✔ Packages installed successfully.

Note: Angular 16 is pretty old and is no longer under support. See: https://angular.dev/reference/releases#actively-supported-versions

[kosso]

Thanks
I just tried in a fresh directory, using the same commands as you (though still with v16 - though the result was the same)
.. and after trying ng add @angular/pwa and accepting to proceed, I get

ℹ Using package manager: yarn
✔ Found compatible package version: @angular/pwa@16.2.16.
✔ Package information loaded.

The package @angular/pwa@16.2.16 will be installed and executed.
Would you like to proceed? Yes
✖ Packages installation failed, see above.
An unhandled exception occurred: Cannot find module '@angular/pwa/package.json'
Require stack:
- /private/var/folders/yf/5j1c2s2s5pbckzz2hbw20gw00000gn/T/angular-cli-packages-6chjDK/node_modules/noop.js
See "/private/var/folders/yf/5j1c2s2s5pbckzz2hbw20gw00000gn/T/ng-r4OnNG/angular-errors.log" for further details.

The same error I got when using v19.. (When using npm, it works)

Here's my ng version, but as I said, I just downgraded CLI to v16, to test my sanity...

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 16.2.16
Node: 18.20.4
Package Manager: yarn 3.6.0
OS: darwin arm64

Angular: 16.2.12
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1602.16
@angular-devkit/build-angular   16.2.16
@angular-devkit/core            16.2.16
@angular-devkit/schematics      16.2.16
@angular/cli                    16.2.16
@schematics/angular             16.2.16
rxjs                            7.8.2
typescript                      5.1.6
zone.js                         0.13.3

[alan-agius4]

I tried again and this time with version 16 and I am still unable to replicate this

$ ng add @angular/pwa
✔ Found compatible package version: @angular/pwa@16.2.16.
✔ Package information loaded.

The package @angular/pwa@16.2.16 will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.
CREATE ngsw-config.json (631 bytes)
CREATE src/manifest.webmanifest (1342 bytes)
CREATE src/assets/icons/icon-128x128.png (1124 bytes)
CREATE src/assets/icons/icon-144x144.png (1291 bytes)
CREATE src/assets/icons/icon-152x152.png (1306 bytes)
CREATE src/assets/icons/icon-192x192.png (1654 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 (711 bytes)
CREATE src/assets/icons/icon-96x96.png (857 bytes)
UPDATE angular.json (2929 bytes)
UPDATE package.json (1118 bytes)
UPDATE src/app/app.module.ts (739 bytes)
UPDATE src/index.html (476 bytes)
✔ Packages installed successfully.

$ ng v

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 16.2.16
Node: 20.18.1 (Unsupported)
Package Manager: yarn 3.2.0
OS: linux x64

Angular: 16.2.12
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
... service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1602.16
@angular-devkit/build-angular   16.2.16
@angular-devkit/core            16.2.16
@angular-devkit/schematics      16.2.16
@angular/cli                    16.2.16
@schematics/angular             16.2.16
rxjs                            7.8.2
typescript                      5.1.6
zone.js                         0.13.3

Warning: The current version of Node (20.18.1) is not supported by Angular.

Do you have some specific yarn configuration?

[kosso]

OK.. I tried again, after upgrade CLI back to latest @19.2.5 - I also changed Node to 22.0.0...

Angular CLI: 19.2.5
Node: 22.0.0
Package Manager: yarn 3.6.0
OS: darwin arm64

Angular: 19.2.4
... common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1902.5
@angular-devkit/build-angular   19.2.5
@angular-devkit/core            19.2.5
@angular-devkit/schematics      19.2.5
@angular/cli                    19.2.5
@angular/ssr                    19.2.5
@schematics/angular             19.2.5
rxjs                            7.8.2
typescript                      5.7.3
zone.js                         0.15.0

In a new temp folder, I run ng new test-pwa --package-manager=yarn

then.. cd test-pwa and run ng add @angular/pwa ...
Same result...

✔ Determining Package Manager
  › Using package manager: yarn
✔ Searching for compatible package version
  › Found compatible package version: @angular/pwa@19.2.5.
✔ Loading package information from registry
✔ Confirming installation
✖ Cannot find module '@angular/pwa/package.json'
  Require stack:
  - /private/var/folders/yf/5j1c2s2s5pbckzz2hbw20gw00000gn/T/angular-cli-packages-rslgG9pvSbRU/node_modules/noop.js
An unhandled exception occurred: Cannot find module '@angular/pwa/package.json'
Require stack:
- /private/var/folders/yf/5j1c2s2s5pbckzz2hbw20gw00000gn/T/angular-cli-packages-rslgG9pvSbRU/node_modules/noop.js
See "/private/var/folders/yf/5j1c2s2s5pbckzz2hbw20gw00000gn/T/ng-r7CFCC/angular-errors.log" for further details.

[kosso]

Now I tried reinstalling CLI and also Yarn and have this version.

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 19.2.5
Node: 22.0.0
Package Manager: yarn 4.8.0
OS: darwin arm64

Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1902.5 (cli-only)
@angular-devkit/core         19.2.5 (cli-only)
@angular-devkit/schematics   19.2.5 (cli-only)
@schematics/angular          19.2.5 (cli-only)

But now when I try to create a new app with ng new test-pwa --package-manager=yarn, I now get...

✖ Package install failed, see above.
The Schematic workflow failed. See above.

But these are no errors "above"....

This is madness ...
I've been using Angular since V2 and never had such problems as this.

[alan-agius4]

I'm sorry, but we can't reproduce the problem following the instructions you provided.

[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.}