2

Trying to run npm install command for my angular app, but I keep getting dependency errors. I'm new to TypeScript and Angular, what are some ways I should proceed?

I've tried clearing my npm cache and removing node modules and installing them again. However, I'm still getting this error.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: angular-dashboard-page@0.0.0
npm ERR! Found: typescript@5.0.4
npm ERR! node_modules/typescript
npm ERR!   dev typescript@"~5.0.4" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer typescript@">=4.8.2 <5.0" from @angular/compiler-cli@15.2.6
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   dev @angular/compiler-cli@"~15.2.6" from the root project
npm ERR!   peer @angular/compiler-cli@"^15.0.0" from @angular-devkit/build-angular@15.2.5
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"~15.2.5" 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!
npm ERR! For a full report see:
npm ERR! C:\Users\ASUS\AppData\Local\npm-cache\_logs\2023-04-11T11_11_48_335Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: C:\Users\ASUS\AppData\Local\npm-cache\_logs\2023-04-11T11_11_48_335Z-debug-0.log

Debug log:

0 verbose cli C:\Program Files\nodejs\node.exe C:\Users\ASUS\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js
1 info using npm@9.6.4
2 info using node@v18.15.0
3 timing npm:load:whichnode Completed in 1ms
4 timing config:load:defaults Completed in 1ms
5 timing config:load:file:C:\Users\ASUS\AppData\Roaming\npm\node_modules\npm\npmrc Completed in 2ms
6 timing config:load:builtin Completed in 2ms
7 timing config:load:cli Completed in 1ms
8 timing config:load:env Completed in 1ms
9 timing config:load:file:C:\Users\ASUS\Desktop\operator-interface-main\client\.npmrc Completed in 0ms
10 timing config:load:project Completed in 1ms
11 timing config:load:file:C:\Users\ASUS\.npmrc Completed in 1ms
12 timing config:load:user Completed in 1ms
13 timing config:load:file:C:\Users\ASUS\AppData\Roaming\npm\etc\npmrc Completed in 1ms
14 timing config:load:global Completed in 1ms
15 timing config:load:setEnvs Completed in 1ms
16 timing config:load Completed in 9ms
17 timing npm:load:configload Completed in 10ms
18 timing npm:load:mkdirpcache Completed in 1ms
19 timing npm:load:mkdirplogs Completed in 0ms
20 verbose title npm install
21 verbose argv "install"
22 timing npm:load:setTitle Completed in 1ms
23 timing config:load:flatten Completed in 2ms
24 timing npm:load:display Completed in 4ms
25 verbose logfile logs-max:10 dir:C:\Users\ASUS\AppData\Local\npm-cache\_logs\2023-04-11T11_11_48_335Z-
26 verbose logfile C:\Users\ASUS\AppData\Local\npm-cache\_logs\2023-04-11T11_11_48_335Z-debug-0.log
27 timing npm:load:logFile Completed in 8ms
28 timing npm:load:timers Completed in 0ms
29 timing npm:load:configScope Completed in 0ms
30 timing npm:load Completed in 25ms
31 timing arborist:ctor Completed in 0ms
32 timing arborist:ctor Completed in 0ms
33 silly logfile start cleaning logs, removing 6 files
34 timing idealTree:init Completed in 20ms
35 timing idealTree:userRequests Completed in 0ms
36 silly idealTree buildDeps
37 silly fetch manifest @angular/animations@~15.2.6
38 silly logfile done cleaning log files
39 http fetch GET 200 https://registry.npmjs.org/@angular%2fanimations 603ms (cache revalidated)
40 silly fetch manifest @angular/core@~15.2.6
41 http fetch GET 200 https://registry.npmjs.org/@angular%2fcore 109ms (cache revalidated)
42 silly fetch manifest rxjs@~7.8.0
43 http fetch GET 200 https://registry.npmjs.org/rxjs 366ms (cache revalidated)
44 silly fetch manifest zone.js@~0.13.0
45 http fetch GET 200 https://registry.npmjs.org/zone.js 107ms (cache revalidated)
46 silly fetch manifest @angular/cdk@^15.2.6
47 http fetch GET 200 https://registry.npmjs.org/@angular%2fcdk 84ms (cache revalidated)
48 silly fetch manifest @angular/common@~15.2.6
49 http fetch GET 200 https://registry.npmjs.org/@angular%2fcommon 76ms (cache revalidated)
50 silly fetch manifest @angular/compiler@~15.2.6
51 http fetch GET 200 https://registry.npmjs.org/@angular%2fcompiler 77ms (cache revalidated)
52 silly fetch manifest @angular/forms@~15.2.6
53 http fetch GET 200 https://registry.npmjs.org/@angular%2fforms 90ms (cache revalidated)
54 silly fetch manifest @angular/platform-browser@~15.2.6
55 http fetch GET 200 https://registry.npmjs.org/@angular%2fplatform-browser 1180ms (cache revalidated)
56 silly fetch manifest @angular/material@^15.2.6
57 http fetch GET 200 https://registry.npmjs.org/@angular%2fmaterial 290ms (cache revalidated)
58 silly fetch manifest @angular/platform-browser-dynamic@~15.2.6
59 http fetch GET 200 https://registry.npmjs.org/@angular%2fplatform-browser-dynamic 238ms (cache revalidated)
60 silly fetch manifest @angular/router@~15.2.6
61 http fetch GET 200 https://registry.npmjs.org/@angular%2frouter 203ms (cache revalidated)
62 silly fetch manifest @coreui/angular@^4.4.1
63 http fetch GET 200 https://registry.npmjs.org/@coreui%2fangular 2032ms (cache revalidated)
64 silly fetch manifest @googlemaps/js-api-loader@^1.15.1
65 http fetch GET 200 https://registry.npmjs.org/@googlemaps%2fjs-api-loader 399ms (cache revalidated)
66 silly fetch manifest @types/gsap@^3.0.0
67 http fetch GET 200 https://registry.npmjs.org/@types%2fgsap 1648ms (cache revalidated)
68 silly fetch manifest @types/socket.io@^3.0.2
69 http fetch GET 200 https://registry.npmjs.org/@types%2fsocket.io 2418ms (cache revalidated)
70 silly fetch manifest ably@^1.2.4
71 http fetch GET 200 https://registry.npmjs.org/ably 1953ms (cache updated)
72 silly fetch manifest gsap@^3.11.5
73 http fetch GET 200 https://registry.npmjs.org/gsap 1501ms (cache updated)
74 silly fetch manifest kioskboard@^2.3.0
75 http fetch GET 200 https://registry.npmjs.org/kioskboard 1259ms (cache revalidated)
76 silly fetch manifest tslib@^2.5.0
77 http fetch GET 200 https://registry.npmjs.org/tslib 258ms (cache revalidated)
78 silly fetch manifest webrtc-adapter@^8.2.2
79 http fetch GET 200 https://registry.npmjs.org/webrtc-adapter 701ms (cache updated)
80 silly fetch manifest @angular-devkit/build-angular@~15.2.5
81 http fetch GET 200 https://registry.npmjs.org/@angular-devkit%2fbuild-angular 3904ms (cache updated)
82 silly fetch manifest @angular/compiler-cli@~15.2.6
83 http fetch GET 200 https://registry.npmjs.org/@angular%2fcompiler-cli 2051ms (cache updated)
84 silly fetch manifest typescript@~5.0.4
85 http fetch GET 200 https://registry.npmjs.org/typescript 4762ms (cache updated)
86 silly fetch manifest typescript@>=4.8.2 <5.0
87 timing idealTree Completed in 26540ms
88 timing command:install Completed in 26547ms
89 verbose stack Error: unable to resolve dependency tree
89 verbose stack     at [failPeerConflict] (C:\Users\ASUS\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:1381:25)
89 verbose stack     at [loadPeerSet] (C:\Users\ASUS\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:1347:34)
89 verbose stack     at async [loadPeerSet] (C:\Users\ASUS\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:1326:23)
89 verbose stack     at async [buildDepStep] (C:\Users\ASUS\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:929:11)
89 verbose stack     at async Arborist.buildIdealTree (C:\Users\ASUS\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:207:7)
89 verbose stack     at async Promise.all (index 1)
89 verbose stack     at async Arborist.reify (C:\Users\ASUS\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\reify.js:159:5)
89 verbose stack     at async Install.exec (C:\Users\ASUS\AppData\Roaming\npm\node_modules\npm\lib\commands\install.js:146:5)
89 verbose stack     at async module.exports (C:\Users\ASUS\AppData\Roaming\npm\node_modules\npm\lib\cli.js:89:5)
90 verbose cwd C:\Users\ASUS\Desktop\operator-interface-main\client
91 verbose Windows_NT 10.0.22621
92 verbose node v18.15.0
93 verbose npm  v9.6.4
94 error code ERESOLVE
95 error ERESOLVE unable to resolve dependency tree
96 error
97 error While resolving: [1mangular-dashboard-page[22m@[1m0.0.0[22m
97 error Found: [1mtypescript[22m@[1m5.0.4[22m[2m[22m
97 error [2mnode_modules/typescript[22m
97 error   [33mdev[39m [1mtypescript[22m@"[1m~5.0.4[22m" from the root project
97 error
97 error Could not resolve dependency:
97 error [35mpeer[39m [1mtypescript[22m@"[1m>=4.8.2 <5.0[22m" from [1m@angular/compiler-cli[22m@[1m15.2.6[22m[2m[22m
97 error [2mnode_modules/@angular/compiler-cli[22m
97 error   [33mdev[39m [1m@angular/compiler-cli[22m@"[1m~15.2.6[22m" from the root project
97 error   [35mpeer[39m [1m@angular/compiler-cli[22m@"[1m^15.0.0[22m" from [1m@angular-devkit/build-angular[22m@[1m15.2.5[22m[2m[22m
97 error   [2mnode_modules/@angular-devkit/build-angular[22m
97 error     [33mdev[39m [1m@angular-devkit/build-angular[22m@"[1m~15.2.5[22m" from the root project
97 error
97 error Fix the upstream dependency conflict, or retry
97 error this command with --force or --legacy-peer-deps
97 error to accept an incorrect (and potentially broken) dependency resolution.
98 error
98 error
98 error For a full report see:
98 error C:\Users\ASUS\AppData\Local\npm-cache\_logs\2023-04-11T11_11_48_335Z-eresolve-report.txt
99 verbose exit 1
100 timing npm Completed in 26613ms
101 verbose unfinished npm timer reify 1681211508389
102 verbose unfinished npm timer reify:loadTrees 1681211508392
103 verbose unfinished npm timer idealTree:buildDeps 1681211508413
104 verbose unfinished npm timer idealTree:#root 1681211508414
105 verbose code 1
106 error A complete log of this run can be found in: C:\Users\ASUS\AppData\Local\npm-cache\_logs\2023-04-11T11_11_48_335Z-debug-0.log

How can I overcome this? Thank you for the help.

Adwaith Rajeev
  • 69
  • 5
  • Have you tried tracking down and understanding the error? You have `typescript` version `~5.0.4` in your `devDependencies`, however Angular is not compatible with this version of TypeScript yet. – JSON Derulo Apr 11 '23 at 11:51
  • Does this answer your question? [Unable to resolve dependency tree error when installing npm packages](https://stackoverflow.com/questions/64573177/unable-to-resolve-dependency-tree-error-when-installing-npm-packages) – JSON Derulo Apr 11 '23 at 11:52

4 Answers4

2

What this is saying is that the typescript version is not compatible with the angular version you are using.

Try to delete the node_modules folder and the package-lock.json file if those exist.

Then you can run npm i typescript@5.0 --save wich is the version that it is saying angular @angular/compiler-cli@15.2.6 dependency use.

ALourenço
  • 100
  • 4
0

the @angular/compiler-cli package requires a version of TypeScript between 4.8.2 and 5.0, while your project has TypeScript 5.0.4 installed.

just downgrade it to version 5.0 that should work for you.

npm install typescript@4.8.2
Ashutosh Kumar
  • 830
  • 7
  • 19
0

The dependency you're trying to add requires you're TS version to be <5, run npm i typescript@~4 then try installing your package again.

Zwiqy45
  • 41
  • 7
-2
npm audit --fix

Enabling force flag would help you disabling the error and installs the deps

npm i -f

(optional) maybe need to update the deps but this could be a breaking change

npm outdated --latest
Vijay
  • 228
  • 3
  • 8
  • The first and last solution won't change anything about the error. It's a totally valid peer dependency conflict. The second solution `npm i -f` will simply ignore the error and will cause follow-up issues when building the application. – JSON Derulo Apr 11 '23 at 11:55