I’m trying to add a PWA support to my existing Angular project (non-standalone) but it seems to have compatibility issues. This is how the package.json looks like.

{
  "name": "client",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node -r dotenv/config envPopulator.js && ng serve -o",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/router": "^17.3.0",
    "@tsparticles/angular": "^3.0.0",
    "@tsparticles/engine": "^3.4.0",
    "@tsparticles/slim": "^3.4.0",
    "@types/dom-to-image": "^2.6.7",
    "angularx-qrcode": "^17.0.1",
    "canvas-confetti": "^1.9.3",
    "dom-to-image": "^2.6.0",
    "dom-to-image-more": "^3.3.0",
    "driver.js": "^1.3.1",
    "ngx-spinner": "^17.0.0",
    "primeflex": "^3.3.1",
    "primeicons": "^7.0.0",
    "primeng": "^17.18.4",
    "rxjs": "~7.8.0",
    "socket.io-client": "^4.7.5",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.3.4",
    "@angular/cli": "^17.3.4",
    "@angular/compiler-cli": "^17.3.0",
    "@types/canvas-confetti": "^1.6.4",
    "@types/jasmine": "~5.1.0",
    "@types/uuid": "^10.0.0",
    "dotenv": "^16.4.5",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.4.2"
  }
}

ng version of my machine

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


Angular CLI: 18.1.3
Node: 20.13.1
Package Manager: npm 10.5.2
OS: win32 x64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1801.3 (cli-only)
@angular-devkit/core         18.1.3 (cli-only)
@angular-devkit/schematics   18.1.3 (cli-only)
@schematics/angular          18.1.3 (cli-only)

I tried ng add @angular/pwa,

ℹ Using package manager: npm
✔ Found compatible package version: @angular/[email protected].
✔ Package information loaded.

The package @angular/[email protected] will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.
CREATE ngsw-config.json (667 bytes)
CREATE src/manifest.webmanifest (1395 bytes)
CREATE src/assets/icons/icon-128x128.png (2875 bytes)
CREATE src/assets/icons/icon-144x144.png (3077 bytes)
CREATE src/assets/icons/icon-152x152.png (3293 bytes)
CREATE src/assets/icons/icon-192x192.png (4306 bytes)
CREATE src/assets/icons/icon-384x384.png (11028 bytes)
CREATE src/assets/icons/icon-512x512.png (16332 bytes)
CREATE src/assets/icons/icon-72x72.png (1995 bytes)
CREATE src/assets/icons/icon-96x96.png (2404 bytes)
UPDATE angular.json (5497 bytes)
UPDATE package.json (1669 bytes)
UPDATE src/app/app.module.ts (6077 bytes)
UPDATE src/index.html (1838 bytes)
⠸ Installing packages (npm)...npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/core
npm ERR!   @angular/core@"^17.3.0" from the root project
npm ERR!   peer @angular/core@"17.3.9" from @angular/[email protected]
npm ERR!   node_modules/@angular/animations
npm ERR!     @angular/animations@"^17.3.0" from the root project
npm ERR!     peerOptional @angular/animations@"17.3.9" from @angular/[email protected]
npm ERR!     node_modules/@angular/platform-browser
npm ERR!       @angular/platform-browser@"^17.3.0" from the root project
npm ERR!       3 more (@angular/forms, @angular/platform-browser-dynamic, @angular/router)
npm ERR!     1 more (ngx-spinner)
npm ERR!   10 more (@angular/common, @angular/compiler, @angular/forms, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @angular/service-worker@"^17.3.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/[email protected]
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"17.3.12" from @angular/[email protected]
npm ERR!   node_modules/@angular/service-worker
npm ERR!     @angular/service-worker@"^17.3.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.