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

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
      ],...

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:

• Table: https://github.com/primefaces/primeng/blob/7.1.0/src/app/components/table/table.ts
• Paginator: https://github.com/primefaces/primeng/blob/7.1.0/src/app/components/paginator/paginator.ts
• Dropdown: https://github.com/primefaces/primeng/blob/7.1.0/src/app/components/dropdown/dropdown.ts

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.

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

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.

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

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"

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