I'm trying to set up Service Workers in my Angular project.
From the CLI inside my project directory I ran this: ng add @angular/pwa --project chatng It returned "Packages successfully installed" followed by a strange error message in red. "NOT SUPPORTED: keyword "id", use "$id" for schema ID"
Looking at my project, it doesn't seem to have done the things it was supposed to do. There is no ngsw-config.json in my root directory. There is no icons directory in my assets directory.
What could be the problem? Is there perhaps another way to set up Service Workers without using the CLI?
My dependencies in package.json:
"dependencies": {
"@angular/animations": "^14.1.0",
"@angular/common": "^14.1.0",
"@angular/compiler": "^14.1.0",
"@angular/core": "^14.1.0",
"@angular/forms": "^14.1.0",
"@angular/platform-browser": "^14.1.0",
"@angular/platform-browser-dynamic": "^14.1.0",
"@angular/pwa": "^0.5.3",
"@angular/router": "^14.1.0",
"bootstrap": "^5.2.1",
"ngx-socket-io": "^4.3.1",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^14.1.0",
"@angular/cli": "~14.1.0",
"@angular/compiler-cli": "^14.1.0",
"@types/jasmine": "~4.0.0",
"jasmine-core": "~4.2.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"typescript": "~4.7.2"
}
ng version returns this:
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 16.1.6
Node: 16.17.0
Package Manager: npm 8.15.0
OS: win32 x64
Angular: 14.2.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1402.3
@angular-devkit/build-angular 14.2.3
@angular-devkit/core 14.2.3
@angular-devkit/schematics 16.1.6
@angular/cli 16.1.6
@angular/pwa 0.5.3
@schematics/angular 16.1.6
rxjs 7.5.6
typescript 4.7.4
zone.js 0.11.8
The CLI is more recent because I just now updated it hoping it would solve my problem, which it didn't.
8/2/2023 edit after trying Raj's suggestion:
i Using package manager: npmtng>add @angular/pwa --project chatng
√ 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 (631 bytes)
CREATE src/manifest.webmanifest (1336 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 (3508 bytes)
UPDATE package.json (1142 bytes)
UPDATE src/app/app.module.ts (1910 bytes)
UPDATE src/index.html (973 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@"^14.1.0" from the root project
npm ERR! peer @angular/core@"14.2.2" from @angular/[email protected]
npm ERR! node_modules/@angular/animations
npm ERR! @angular/animations@"^14.1.0" from the root project
npm ERR! peerOptional @angular/animations@"14.2.2" from @angular/[email protected]
npm ERR! node_modules/@angular/platform-browser
npm ERR! @angular/platform-browser@"^14.1.0" from the root project
npm ERR! 3 more (@angular/forms, @angular/platform-browser-dynamic, @angular/router)
npm ERR! 7 more (@angular/common, @angular/compiler, @angular/forms, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @angular/service-worker@"^14.1.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@"14.3.0" from @angular/[email protected]
npm ERR! node_modules/@angular/service-worker
npm ERR! @angular/service-worker@"^14.1.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.
npm ERR!
npm ERR! See C:\Users\rober\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\rober\AppData\Local\npm-cache\_logs\2023-08-02T18_34_38_713Z-debug-0.log
× Package install failed, see above.
The Schematic workflow failed. See above.
after npm i -f:
npm WARN using --force Recommended protections disabled.
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @angular/[email protected]
npm WARN Found: @angular/[email protected]
npm WARN node_modules/@angular/common
npm WARN @angular/common@"^14.1.0" from the root project
npm WARN 5 more (@angular/forms, @angular/platform-browser, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer @angular/common@"14.3.0" from @angular/[email protected]
npm WARN node_modules/@angular/service-worker
npm WARN @angular/service-worker@"^14.1.0" from the root project
npm WARN 1 more (@angular-devkit/build-angular)
npm WARN
npm WARN Conflicting peer dependency: @angular/[email protected]
npm WARN node_modules/@angular/common
npm WARN peer @angular/common@"14.3.0" from @angular/[email protected]
npm WARN node_modules/@angular/service-worker
npm WARN @angular/service-worker@"^14.1.0" from the root project
npm WARN 1 more (@angular-devkit/build-angular)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @angular/[email protected]
npm WARN Found: @angular/[email protected]
npm WARN node_modules/@angular/core
npm WARN @angular/core@"^14.1.0" from the root project
npm WARN 8 more (@angular/animations, @angular/common, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer @angular/core@"14.3.0" from @angular/[email protected]
npm WARN node_modules/@angular/service-worker
npm WARN @angular/service-worker@"^14.1.0" from the root project
npm WARN 1 more (@angular-devkit/build-angular)
npm WARN
npm WARN Conflicting peer dependency: @angular/[email protected]
npm WARN node_modules/@angular/core
npm WARN peer @angular/core@"14.3.0" from @angular/[email protected]
npm WARN node_modules/@angular/service-worker
npm WARN @angular/service-worker@"^14.1.0" from the root project
npm WARN 1 more (@angular-devkit/build-angular)
added 1 package, and audited 994 packages in 4s
138 packages are looking for funding
run `npm fund` for details
6 vulnerabilities (3 moderate, 3 high)
To address all issues, run:
npm audit fix
Run `npm audit` for details.
As it seems you were using very old version of pwa, follow below steps -
@angular/pwa from package.json.npm cache clean -f or npm cache verify.--force, or --legacy-peer-deps@angular/pwa --project <project-name>