I am getting error while "npm i ngx-slick-carousel" with angular 11

Question

I am getting error while doing "npm i ngx-slick-carousel --save"

My versions are:

$ npm -v
7.6.1

$ node -v
v14.17.0

Angular CLI: 11.2.13

Errors are :

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: irt-official@0.0.0
npm ERR! Found: @angular/common@11.2.14
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"~11.2.13" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^7.0.0 || ^8.0.0 || ^9.0.0" from ngx-slick-carousel@0.5.1
npm ERR! node_modules/ngx-slick-carousel
npm ERR!   ngx-slick-carousel@"*" 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\malik\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\malik\AppData\Local\npm-cache\_logs\2021-05-19T14_13_57_035Z-debug.log

package.json:

"@angular/animations": "~11.2.13",
"@angular/common": "~11.2.13",
"@angular/compiler": "~11.2.13",
"@angular/core": "~11.2.13",
"@angular/forms": "~11.2.13",
"@angular/platform-browser": "~11.2.13",
"@angular/platform-browser-dynamic": "~11.2.13",
"@angular/router": "~11.2.13",
"angular-animations": "^0.11.0",
"jquery": "^3.6.0",
"rxjs": "~6.6.0",
"slick-carousel": "^1.8.1",
"tslib": "^2.0.0",
"zone.js": "~0.11.3"

Kindly help me with this issue. Why I am not able to install this.Thank you

UPDATE 1:

I have deleted node_module and packagelock.json file and tried to do "npm install" and I am getting this errors now

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: irt-official@0.0.0
npm ERR! Found: @angular/core@11.2.14
npm ERR! node_modules/@angular/core
npm ERR!   @angular/core@"~11.2.13" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/core@"12.0.1" from @angular/animations@12.0.1
npm ERR! node_modules/@angular/animations
npm ERR!   peer @angular/animations@">=6.0.0" from angular-animations@0.11.0
npm ERR!   node_modules/angular-animations
npm ERR!     angular-animations@"^0.11.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\malik\AppData\Local\npm-cache\eresolve-report.txt

for a full report.

UPDATE 2:

I have done "npm install --legacy-peer-deps" this command installed my node_module but when i do "ng serve" after installing i am getting this error

An unhandled exception occurred: The target entry-point "@angular/platform-browser/animations" has missing dependencies:

@angular/animations
@angular/animations/browser

UPDATE 3:

I have completely refreshed every thing like I have uninstalled node and angular cli and reinstalled

node version 16.2.0

npm -v: 7.6.1

Angular CLI: 12.0.1

Now i have created new project "ng new IRT-Official" Then Again i tried to do "npm install ngx-slick-carousel --save" Now i am getting this error.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: irt-official@0.0.0
npm ERR! Found: @angular/common@12.0.1
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"~12.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^7.0.0 || ^8.0.0 || ^9.0.0" from ngx-slick-carousel@0.5.1
npm ERR! node_modules/ngx-slick-carousel
npm ERR!   ngx-slick-carousel@"*" 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

UPDATE 4:

I have manually added "ngx-slick-carousel": "0.5.1", in my packege.json file and then "npm install --legacy-peer-deps" it installed crousal but when i did all steps i am getting error like

Uncaught TypeError: $(...).owlCarousel is not a function

Does this answer your question? [Fix the upstream dependency conflict installing NPM packages](https://stackoverflow.com/questions/64936044/fix-the-upstream-dependency-conflict-installing-npm-packages) — Mauricio Gracia Gutierrez, May 19 '21 at 14:29
@MauricioGraciaGutierrez I Have tried by running "npm install --legacy-peer-deps" But still same errors — Arslan Malik, May 19 '21 at 14:51
try the following "npm install @angular/animations@latest --save", whenever you get a new error look it up in SO or google - https://stackoverflow.com/questions/42857345/cannot-find-module-angular-animations - moving from one error to another is progress — Mauricio Gracia Gutierrez, May 21 '21 at 14:53
@MauricioGraciaGutierrez kindly check update 3 in question . — Arslan Malik, May 21 '21 at 15:16
I have updated my answer with new information, you are missing two commands before installing `ngx-slick-carousel` — Mauricio Gracia Gutierrez, May 21 '21 at 16:11

Mauricio Gracia Gutierrez · Answer 1 · 2021-05-21T16:10:25.997

1

UPDATE

It seems that you are not running the installation steps from https://www.npmjs.com/package/ngx-slick-carousel

PREVIOUS

You package.json is looking for "@angular/common": "~11.2.13" but you have installed version 11.2.14

Update your package.json to

   "@angular/common": "^11.2.13"

or

   "@angular/common": "^11.2.14"

What's the difference between tilde(~) and caret(^) in package.json?

edited May 21 '21 at 16:10

answered May 19 '21 at 15:03

Mauricio Gracia Gutierrez

10,288
6
68
99

I have tried but not working.Can you please help me on team viewer? – Arslan Malik May 21 '21 at 11:46
does the same error appear ? different error ? please update your question. (unable to help you remotly) – Mauricio Gracia Gutierrez May 21 '21 at 13:54
I have unInstalled Angular CLi and installed again now my angular cli version is 12.0.1 And I am updated my question for new errrors – Arslan Malik May 21 '21 at 14:06
I think I have issues with nodejs.. Becuase i have many project i have tried to "npm install" after deleted node_module and packagelock.json file I am not able to install in any project.Should i show you that errors even in this project too i am unable to do "npm install" – Arslan Malik May 21 '21 at 14:21
I am following these steps.I have no issues on first two installation but i have issue on third one ngx crousal installation – Arslan Malik May 21 '21 at 16:20
I am getting close to it.I am going to update 4 in my question – Arslan Malik May 21 '21 at 16:21
Wait, did you run the third step ? what was the output of that ? why are you adding something to package.json by hand ? did you try with --save-dev ? – Mauricio Gracia Gutierrez May 21 '21 at 16:41

score 0 · Answer 2 · answered May 19 '21 at 14:37

0

you can get around this by editing the in your node modules find the slick carousel folder and go to the package module there you can find the version history - you will need to update anywhere that you see version 9 and add 10 and 11. the thing is though you have to also do security testing and unit testing against multiple pieces of code before you put this in production - or you should anyway, you probably should find a carousel module that is kept up to date.

anywhere you see @angular change it to below

"^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0"

answered May 19 '21 at 14:37

Chris Burd

11
1
7

Hello Dear.I have confirmed that my all things starting from @Angular are 11.2.13 – Arslan Malik May 19 '21 at 14:59
no it should been slick carousel not your package.json for angular. this error line tells us what the problem is @angular/common@"^7.0.0 || ^8.0.0 || ^9.0.0" from ngx-slick-carousel@0.5.1 try and delete the node_modules folder and reinstall - because I looked at the git and it has the correct version trees - which means something is wrong with the install I think, sometimes things corrupt - angular is a finicky. – Chris Burd May 19 '21 at 15:26
1

or npm install @angular/cli@11.2.14 @angular/common@11.2.14 ngx-slick-carousel@latest – Chris Burd May 19 '21 at 15:28
nothing worked.Even I have tried with older versions of angular.Can you please help me using Team viewer? – Arslan Malik May 21 '21 at 13:12
I know that having and urgent matter and depend on written answer can be painful, but please dont ask for remote support, we are not a call center. – Mauricio Gracia Gutierrez May 21 '21 at 14:14
yes okay sorry.I am trying to keep my question update so i can get my output soon. – Arslan Malik May 21 '21 at 15:17
@ArslanMalik try to move to angular 12. ng update @angular/cli --allow-dirty --force then do the same for @angular/common – Chris Burd May 22 '21 at 06:08

I am getting error while "npm i ngx-slick-carousel" with angular 11

2 Answers2