Trying to install the Clarity library in Angular with "ng add @clr/angular" getting error "ERESOLVE unable to resolve dependency tree"

Question

I am practicing Angular following a book project which requires the installation of the Clarity library for the project through cmd ng add @clr/angular but I keep getting an error (report) relating to incompatibilties:

0 verbose cli [
0 verbose cli   'C:\\Program Files\\nodejs\\node.exe',
0 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
0 verbose cli   'install',
0 verbose cli   '@clr/angular@12.0.8',
0 verbose cli   '--quiet'
0 verbose cli ]
1 info using npm@8.1.0
2 info using node@v16.13.0
3 timing npm:load:whichnode Completed in 0ms
4 timing config:load:defaults Completed in 2ms
5 timing config:load:file:C:\Program Files\nodejs\node_modules\npm\npmrc Completed in 3ms
6 timing config:load:builtin Completed in 3ms
7 timing config:load:cli Completed in 2ms
8 timing config:load:env Completed in 1ms
9 timing config:load:file:C:\Users\muril\Desktop\Angular\Angular-Projects-Second-Edition-main\issue-tracker\.npmrc Completed in 0ms
10 timing config:load:project Completed in 1ms
11 timing config:load:file:C:\Users\muril\.npmrc Completed in 0ms
12 timing config:load:user Completed in 0ms
13 timing config:load:file:C:\Users\muril\AppData\Roaming\npm\etc\npmrc Completed in 0ms
14 timing config:load:global Completed in 0ms
15 timing config:load:validate Completed in 0ms
16 timing config:load:credentials Completed in 1ms
17 timing config:load:setEnvs Completed in 1ms
18 timing config:load Completed in 12ms
19 timing npm:load:configload Completed in 12ms
20 timing npm:load:setTitle Completed in 1ms
21 timing npm:load:setupLog Completed in 0ms
22 timing config:load:flatten Completed in 4ms
23 timing npm:load:cleanupLog Completed in 2ms
24 timing npm:load:configScope Completed in 0ms
25 timing npm:load:projectScope Completed in 1ms
26 timing npm:load Completed in 20ms
27 timing arborist:ctor Completed in 1ms
28 timing idealTree:init Completed in 620ms
29 timing idealTree:userRequests Completed in 4ms
30 silly idealTree buildDeps
31 silly fetch manifest @clr/angular@12.0.8
32 timing arborist:ctor Completed in 0ms
33 http fetch GET 200 https://registry.npmjs.org/@clr%2fangular 2111ms (cache revalidated)
34 silly fetch manifest @angular/common@~13.0.0
35 http fetch GET 200 https://registry.npmjs.org/@angular%2fcommon 1464ms (cache revalidated)
36 silly fetch manifest @angular/common@^12.0.0
37 silly fetch manifest @angular/core@~13.0.0
38 http fetch GET 200 https://registry.npmjs.org/@angular%2fcore 1450ms (cache revalidated)
39 silly fetch manifest rxjs@~7.4.0
40 http fetch GET 200 https://registry.npmjs.org/rxjs 39ms (cache revalidated)
41 silly fetch manifest zone.js@~0.11.4
42 http fetch GET 200 https://registry.npmjs.org/zone.js 752ms (cache revalidated)
43 timing idealTree Completed in 6521ms
44 timing command:install Completed in 6535ms
45 verbose stack Error: unable to resolve dependency tree
45 verbose stack     at Arborist.[failPeerConflict] (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:1356:25)
45 verbose stack     at Arborist.[loadPeerSet] (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:1322:34)
45 verbose stack     at async Arborist.[buildDepStep] (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:930:11)
45 verbose stack     at async Arborist.buildIdealTree (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:216:7)
45 verbose stack     at async Promise.all (index 1)
45 verbose stack     at async Arborist.reify (C:\Program Files\nodejs\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\reify.js:149:5)
45 verbose stack     at async Install.install (C:\Program Files\nodejs\node_modules\npm\lib\install.js:170:5)
46 verbose cwd C:\Users\muril\Desktop\Angular\Angular-Projects-Second-Edition-main\issue-tracker
47 verbose Windows_NT 10.0.19042
48 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "@clr/angular@12.0.8" "--quiet"
49 verbose node v16.13.0
50 verbose npm  v8.1.0
51 error code ERESOLVE
52 error ERESOLVE unable to resolve dependency tree
53 error
54 error While resolving: issue-tracker@0.0.0
54 error Found: @angular/common@13.0.3
54 error node_modules/@angular/common
54 error   @angular/common@"~13.0.0" from the root project
54 error
54 error Could not resolve dependency:
54 error peer @angular/common@"^12.0.0" from @clr/angular@12.0.8
54 error node_modules/@clr/angular
54 error   @clr/angular@"12.0.8" from the root project
54 error
54 error Fix the upstream dependency conflict, or retry
54 error this command with --force, or --legacy-peer-deps
54 error to accept an incorrect (and potentially broken) dependency resolution.
54 error
54 error See C:\Users\muril\AppData\Local\npm-cache\eresolve-report.txt for a full report.
55 verbose exit 1

I tried specifying the clarity version (@clr/angular@12) and using the command --force along, but they all led to the same error. There seems to be many posts referring to npm cache online but they are very varied on views of what is the suitable solution and make me afraid of making things worse by just trying them.

Could you pls help?

Answer 1

Some of the dependencies of your app (or of angular's) are not fully upgraded to work with npm 8.x ( more specifically with the new version of package.json structure)

try

npm  i @clr/angular --legacy-peer-deps

downgrading to npm 7.x should also work.