I am trying to ng add @angular/pwa but fails with the following error, new to this. What can I do to solve this error?
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 (661 bytes)
CREATE src/manifest.webmanifest (1389 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 (4451 bytes)
UPDATE package.json (2222 bytes)
UPDATE src/app/app.module.ts (1357 bytes)
UPDATE src/index.html (1075 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.0.2" from the root project
npm ERR! peer @angular/core@"17.3.8" from @angular/[email protected]
npm ERR! node_modules/@angular/animations
npm ERR! @angular/animations@"^17.0.2" from the root project
npm ERR! peerOptional @angular/animations@"17.3.8" from @angular/[email protected]
npm ERR! node_modules/@angular/platform-browser
npm ERR! @angular/platform-browser@"^17.0.2" from the root project
npm ERR! 3 more (@angular/forms, @angular/platform-browser-dynamic, @angular/router)
npm ERR! 8 more (@angular/common, @angular/compiler, @angular/forms, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @angular/service-worker@"^17.0.2" 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.10" from @angular/[email protected]
npm ERR! node_modules/@angular/service-worker
npm ERR! @angular/service-worker@"^17.0.2" 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.
Below if my Ionic info:
Ionic:
Ionic CLI : 6.20.8 (C:...\AppData\Roaming\npm\node_modules\@ionic\cli)
Ionic Framework : not installed
@angular-devkit/build-angular : 17.3.7
@angular-devkit/schematics : 17.3.7
@angular/cli : 17.3.7
@ionic/angular-toolkit : 11.0.1
Capacitor:
Capacitor CLI : 6.0.0
@capacitor/android : not installed
@capacitor/core : 6.0.0
@capacitor/ios : not installed
Utility:
cordova-res : not installed globally
native-run : 2.0.1
System:
NodeJS : v22.2.0 (C:\Program Files\nodejs\node.exe)
npm : 9.6.0
OS : Windows 10
Here's my package.json:
{
"name": "ap-cloud-app",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"lint": "ng lint"
},
"private": true,
"dependencies": {
"@angular/animations": "^17.0.2",
"@angular/common": "^17.0.2",
"@angular/compiler": "^17.0.2",
"@angular/core": "^17.0.2",
"@angular/forms": "^17.0.2",
"@angular/platform-browser": "^17.0.2",
"@angular/platform-browser-dynamic": "^17.0.2",
"@angular/router": "^17.0.2",
"@angular/service-worker": "^17.0.2",
"@capacitor/app": "6.0.0",
"@capacitor/browser": "^6.0.0",
"@capacitor/core": "6.0.0",
"@capacitor/haptics": "6.0.0",
"@capacitor/keyboard": "6.0.0",
"@capacitor/network": "^6.0.0",
"@capacitor/status-bar": "6.0.0",
"@ionic/angular": "^8.0.0",
"@ionic/storage-angular": "^4.0.0",
"ionicons": "^7.0.0",
"rxjs": "~7.8.0",
"swiper": "^11.1.3",
"tslib": "^2.3.0",
"zone.js": "~0.14.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "^17.0.0",
"@angular-eslint/builder": "^17.0.0",
"@angular-eslint/eslint-plugin": "^17.0.0",
"@angular-eslint/eslint-plugin-template": "^17.0.0",
"@angular-eslint/schematics": "^17.0.0",
"@angular-eslint/template-parser": "^17.0.0",
"@angular/cli": "^17.0.0",
"@angular/compiler-cli": "^17.0.2",
"@angular/language-service": "^17.0.2",
"@capacitor/cli": "6.0.0",
"@ionic/angular-toolkit": "^11.0.1",
"@types/jasmine": "~5.1.0",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"eslint": "^8.57.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-jsdoc": "^48.2.1",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~5.1.0",
"jasmine-spec-reporter": "~5.0.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.2.2"
},
"description": "An Ionic project"
}
Thanks in advance.
You're trying to install @angular/[email protected] but your angular dependancies are version 17.0.0.
Either you need to update all your angular packages to newest version, then try to install @angualr/pwa again.
or you can try to install the pwa package for your version: @angular/[email protected]