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

Question

我遇到错误：“找不到模块：错误：无法解析'@angular/cdk/scrolling'”，一旦我添加 import TableModule from primeNG在 app.module.ts。为什么抛出这个错误？我没有看到 primeNG 文档中提到的任何模块依赖性 https://www.primefaces.org/primeng/#/table。

错误：

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

Answer 1

使用 npm install @angular/cdk --save 可以解决这个问题。

它需要它，因为 p-table 使用 p-paginator，而 p-paginator 使用 p-dropdown，这需要 cdk。

您可以在这里查看：

• Table: https://github.com/primefaces/primeng/blob/7.1.0/src/app/components/table/table.ts
• 分页器： https://github.com/primefaces/primeng/blob/7.1.0/src/app/components/paginator/paginator.ts
• 下拉列表：https://github.com/primefaces/primeng/blob/7.1.0/src/app/components/dropdown/dropdown.ts

Answer 2

只需安装适用于您的 cdk 的 primeng 版本，反之亦然。但是为 primeng 更改你的 cdk 版本可能会扰乱你已经安装的其他依赖项和包

Answer 3

添加@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

Answer 4

您使用的是哪个 angular 版本。 Angular 9 已从上一版本 '@angular/cdk/scrolling' 中删除 ScrollDispatchModule。您可以在不导入模块的情况下使用它。如果没有，您可以改为导入 ScrollingModule。

Answer 5

检查您的“package.json”以确认是否安装了“@angular/cdk”。如果不是，请安装它。如果是，按“CTRL C”剪切并用“ng serve”保留

Answer 6

刚刚取消更新

当您在 Angular 13.1.0 中导入 PrimeNg 13.0.3 TableModule 时，足以破坏编译器，因为该模块仍然依赖于 @angular/cdk/scrolling.

要解决，您需要安装 angular/cdk，如已接受的回复中所述。

Answer 7

关于您需要安装CDK包的primeNg文档：

npm install @angular/cdk --save

此外，您可以查看此页面： https://primefaces.org/primeng/#/dropdown