Dependency Conflict When Trying To Install PWA In An Angular Application

Question

I'm trying to install PWA in my current Angular 14 application; however, I always get a dependency conflict error.

Please note that I have used both the --legacy-peer-deps and the --force options

Please also note that I'm relatively new to Angular, so I might be missing something obvious.

Command used

ng add @angular/pwa --legacy-peer-deps

Error log

npm0 verbose cli C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js
1 info using npm@8.11.0
2 info using node@v16.15.1
3 timing npm:load:whichnode Completed in 0ms
4 timing config:load:defaults Completed in 1ms
5 timing config:load:file:C:\Program Files\nodejs\node_modules\npm\npmrc Completed in 3ms
6 timing config:load:builtin Completed in 4ms
7 timing config:load:cli Completed in 1ms
8 timing config:load:env Completed in 0ms
9 timing config:load:file:C:\Users\XxSca\source\repos\ALFAGALA\Frondend\AlfagalaAdminPanel\.npmrc Completed in 0ms
10 timing config:load:project Completed in 5ms
11 timing config:load:file:C:\Users\XxSca\.npmrc Completed in 0ms
12 timing config:load:user Completed in 1ms
13 timing config:load:file:C:\Users\XxSca\AppData\Roaming\npm\etc\npmrc Completed in 0ms
14 timing config:load:global Completed in 0ms
15 timing config:load:validate Completed in 1ms
16 timing config:load:credentials Completed in 0ms
17 timing config:load:setEnvs Completed in 1ms
18 timing config:load Completed in 15ms
19 timing npm:load:configload Completed in 16ms
20 timing npm:load:mkdirpcache Completed in 0ms
21 timing npm:load:mkdirplogs Completed in 0ms
22 verbose title npm install @angular/pwa@0.5.3
23 verbose argv "install" "@angular/pwa@0.5.3"
24 timing npm:load:setTitle Completed in 1ms
25 timing config:load:flatten Completed in 3ms
26 timing npm:load:display Completed in 4ms
27 verbose logfile logs-max:10 dir:C:\Users\XxSca\AppData\Local\npm-cache\_logs
28 verbose logfile C:\Users\XxSca\AppData\Local\npm-cache\_logs\2023-01-28T17_02_13_768Z-debug-0.log
29 timing npm:load:logFile Completed in 5ms
30 timing npm:load:timers Completed in 0ms
31 timing npm:load:configScope Completed in 1ms
32 timing npm:load Completed in 29ms
33 timing arborist:ctor Completed in 0ms
34 silly logfile start cleaning logs, removing 4 files
35 silly logfile done cleaning log files
36 timing idealTree:init Completed in 1049ms
37 timing idealTree:userRequests Completed in 8ms
38 silly idealTree buildDeps
39 silly fetch manifest @angular/pwa@0.5.3
40 verbose shrinkwrap failed to load node_modules/.package-lock.json out of date, updated: node_modules
41 http fetch GET 200 https://registry.npmjs.org/@angular%2fpwa 2667ms (cache revalidated)
42 silly placeDep ROOT @angular/pwa@0.5.3 OK for: sb-admin-bs4-angular-9@10.0.0 want: 0.5.3
43 silly fetch manifest @angular-devkit/core@0.5.3
44 silly fetch manifest @angular-devkit/schematics@0.5.3
45 silly fetch manifest @schematics/angular@0.5.3
46 silly fetch manifest typescript@~2.6.2
47 http fetch GET 200 https://registry.npmjs.org/@angular-devkit%2fschematics 270ms (cache revalidated)
48 http fetch GET 200 https://registry.npmjs.org/@angular-devkit%2fcore 424ms (cache revalidated)
49 http fetch GET 200 https://registry.npmjs.org/@schematics%2fangular 449ms (cache revalidated)
50 http fetch GET 200 https://registry.npmjs.org/typescript 1073ms (cache revalidated)
51 timing idealTree:#root Completed in 3811ms
52 silly fetch manifest @angular/common@^9.1.0 || ^10.0.0
53 http fetch GET 200 https://registry.npmjs.org/@angular%2fcommon 141ms (cache revalidated)
54 silly fetch manifest @angular/core@^9.1.0 || ^10.0.0
55 http fetch GET 200 https://registry.npmjs.org/@angular%2fcore 154ms (cache revalidated)
56 silly fetch manifest rxjs@^6.5.3
57 http fetch GET 200 https://registry.npmjs.org/rxjs 106ms (cache revalidated)
58 silly fetch manifest zone.js@~0.10.3
59 http fetch GET 200 https://registry.npmjs.org/zone.js 821ms (cache revalidated)
60 timing idealTree Completed in 6130ms
61 timing command:install Completed in 6138ms
62 verbose stack Error: could not resolve
62 verbose stack     at PlaceDep.failPeerConflict (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\place-dep.js:549:25)
62 verbose stack     at PlaceDep.place (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\place-dep.js:199:21)
62 verbose stack     at new PlaceDep (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\place-dep.js:73:10)
62 verbose stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:990:31
62 verbose stack     at Array.map (<anonymous>)
62 verbose stack     at Arborist.[buildDepStep] (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:990:8)
62 verbose stack     at async Arborist.buildIdealTree (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:218:7)
62 verbose stack     at async Promise.all (index 1)
62 verbose stack     at async Arborist.reify (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\reify.js:153:5)
62 verbose stack     at async Install.exec (C:\Program Files\nodejs\node_modules\npm\lib\commands\install.js:156:5)
63 verbose cwd C:\Users\XxSca\source\repos\ALFAGALA\Frondend\AlfagalaAdminPanel
64 verbose Windows_NT 10.0.19044
65 verbose node v16.15.1
66 verbose npm  v8.11.0
67 error code ERESOLVE
68 error ERESOLVE could not resolve
69 error
70 error While resolving: @agm/core@3.0.0-beta.0
70 error Found: @angular/common@14.2.0
70 error node_modules/@angular/common
70 error   peer @angular/common@"^13.0.0 || ^14.0.0-0" from @angular/cdk@13.3.9
70 error   node_modules/@angular/cdk
70 error     peer @angular/cdk@"13.3.9" from @angular/material@13.3.9
70 error     node_modules/@angular/material
70 error       @angular/material@"^13.3.9" from the root project
70 error     @angular/cdk@"^13.3.9" from the root project
70 error   peer @angular/common@"14.2.0" from @angular/forms@14.2.0
70 error   node_modules/@angular/forms
70 error     peer @angular/forms@"^13.0.0 || ^14.0.0-0" from @angular/material@13.3.9
70 error     node_modules/@angular/material
70 error       @angular/material@"^13.3.9" from the root project
70 error     peer @angular/forms@"^14.1.0" from @ng-bootstrap/ng-bootstrap@13.0.0
70 error     node_modules/@ng-bootstrap/ng-bootstrap
70 error       @ng-bootstrap/ng-bootstrap@"13.0.0" from the root project
70 error     1 more (the root project)
70 error   12 more (@angular/google-maps, @angular/material, ...)
70 error
70 error Could not resolve dependency:
70 error peer @angular/common@"^9.1.0 || ^10.0.0" from @agm/core@3.0.0-beta.0
70 error node_modules/@agm/core
70 error   @agm/core@"^3.0.0-beta.0" from the root project
70 error
70 error Conflicting peer dependency: @angular/common@10.2.5
70 error node_modules/@angular/common
70 error   peer @angular/common@"^9.1.0 || ^10.0.0" from @agm/core@3.0.0-beta.0
70 error   node_modules/@agm/core
70 error     @agm/core@"^3.0.0-beta.0" from the root project
70 error
70 error Fix the upstream dependency conflict, or retry
70 error this command with --force, or --legacy-peer-deps
70 error to accept an incorrect (and potentially broken) dependency resolution.
70 error
70 error See C:\Users\XxSca\AppData\Local\npm-cache\eresolve-report.txt for a full report.
71 verbose exit 1
72 timing npm Completed in 6283ms
73 verbose unfinished npm timer reify 1674925333907
74 verbose unfinished npm timer reify:loadTrees 1674925333912
75 verbose unfinished npm timer idealTree:buildDeps 1674925334970
76 verbose unfinished npm timer idealTree:node_modules/@agm/core 1674925338782
77 verbose code 1
78 error A complete log of this run can be found in:
78 error     C:\Users\XxSca\AppData\Local\npm-cache\_logs\2023-01-28T17_02_13_768Z-debug-0.log

Answer 1

you can try to install the dependency then make it generate the code like that

npm i @angular/pwa -f
ng g @angular/pwa:ng-add