Error: Module not found: Error: Can't resolve '@angular/cdk/scrolling'

Question

I am encountering the error: "Module not found: Error: Can't resolve '@angular/cdk/scrolling'" as soon as I add import TableModule from primeNG in app.module.ts. Why is this error is thrown? I don't see any module dependency mentioned in the primeNG documentation https://www.primefaces.org/primeng/#/table.

Error:

Failed to compile.

./node_modules/primeng/components/dropdown/dropdown.js
Module not found: Error: Can't resolve '@angular/cdk/scrolling' in '/Users/admin/angular/MovieApp/node_modules/primeng/components/dropdown'

        import {TableModule} from 'primeng/table';
    ...
    imports: [
        BrowserModule,
        AppRoutingModule,
        HttpClientModule,CarouselModule,FieldsetModule,BrowserAnimationsModule,LightboxModule,
        ScrollPanelModule,TableModule
      ],...

did you try to install cdk? ```npm install @angular/cdk --save``` — Fateme Fazli, Apr 10 '19 at 10:14
yes, I did, the compilation error is resolved. I will try to use in the component. Between I am trying to understand how is it dependent to TableModule while in the primeng documentation, it is mentioned as dependency: None. — javapedia.net, Apr 10 '19 at 10:22
"@angular/core": "~7.1.0", "primeicons": "^1.0.0", "primeng": "^7.1.0", — javapedia.net, Apr 10 '19 at 10:35
see https://github.com/primefaces/primeng/commit/03e6546ab67d7cd045c45c612aad7ae44b77ae91 primeng uses cdk as devDependencies in version 7.1.0. — Fateme Fazli, Apr 10 '19 at 10:41

score 119 · Accepted Answer · answered Apr 10 '19 at 10:31

119

Using npm install @angular/cdk --save would resolve this.

It needs it because the p-table uses the p-paginator which uses p-dropdown, which this needs the cdk.

You can check it here:

answered Apr 10 '19 at 10:31

Daniel Piñeiro

3,009
1
16
26

2

Worked for me, but I also had to restart my IDE afterwards before it was picked up, a recompilation and restart of processes wasn't enough (using WebStorm) – Peter Andreas Moelgaard May 13 '20 at 02:22
1

So, installing npm modules that require cdk do not result in cdk being install if it is needed? – Display name Apr 10 '21 at 20:15
1

strange, I think prime-ng should at least list @angular/cdk as a peer dependency in its package.json. Or mention in the docs that the CDK needs to be installed. Not so dev-friendly to let everyone run into that error when using the Table module. – spierala Jun 12 '21 at 08:37

score 2 · Answer 2 · answered May 15 '20 at 03:53

2

Which angular version are you using. Angular 9 was removed ScrollDispatchModule in '@angular/cdk/scrolling' from last version. you can use it without importing the module . If not you can import the ScrollingModule instead.

answered May 15 '20 at 03:53

CodeMind

616
1
7
19

score 1 · Answer 3 · edited Dec 24 '21 at 18:32

1

Just un update

When you import the PrimeNg 13.0.3 TableModule in your Angular 13.1.0, is enough to break the compiler because the module is still dependent on @angular/cdk/scrolling.

To solve, you need to install angular/cdk, as already mentioned in the accepted response.

edited Dec 24 '21 at 18:32

javapedia.net

2,531
4
25
50

answered Dec 23 '21 at 09:21

Luca Di Lenardo

21
2

score 0 · Answer 4 · answered Jul 12 '19 at 18:27

0

Just install a primeng version that is OK with your cdk, other way around. But changing your cdk version for primeng could mess with other dependencies and packages that you've already installed

answered Jul 12 '19 at 18:27

Ahmed Mujtaba

11
2

score 0 · Answer 5 · answered Jan 15 '21 at 18:53

0

Check your "package.json"to confirm if "@angular/cdk" is installed. If its not, install it. If it is, press "CTRL C" to cut out and reserve with "ng serve"

answered Jan 15 '21 at 18:53

Ib Abayomi Alli

361
3
6

score -2 · Answer 6 · answered Apr 07 '22 at 11:36

-2

Regarding to the primeNg documentation you need to install CDK package:

npm install @angular/cdk --save

Also, you can check this page: https://primefaces.org/primeng/#/dropdown

answered Apr 07 '22 at 11:36

Hamid

761
7
18

@Daniel Piñeiro already mentioned this – Chukwuemeka Maduekwe Sep 19 '22 at 07:41

score -3 · Answer 7 · edited Jan 03 '20 at 03:15

ng add @angular/material

Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink

❯ Indigo/Pink [ Preview: https://material.angular.io?theme=indigo-pink ]
❯ Deep Purple/Amber [ Preview: https://material.angular.io?theme=deeppurple-amber ]
❯ Pink/Blue Grey [ Preview: https://material.angular.io?theme=pink-bluegrey ]
❯ Purple/Green [ Preview: https://material.angular.io?theme=purple-green ]
Choose Hammer.js (Gesture recognition support) and Angular browser animation service.
# Set up HammerJS for gesture recognition? (Y/n) = Y
# ? Set up browser animations for Angular Material? (Y/n) = Y

This is obviously copied from [here](https://www.positronx.io/angular-8-drag-and-drop-tutorial-with-example/). [From Review](https://stackoverflow.com/review/low-quality-posts/24991982). — Wai Ha Lee, Jan 03 '20 at 00:13

Error: Module not found: Error: Can't resolve '@angular/cdk/scrolling'

7 Answers7

Linked