错误：找不到模块：错误：无法解析'@angular/cdk/scrolling'

Question

我遇到了一个错误："Module not found: Error: Can't resolve '@angular/cdk/scrolling'"，当我在app.module.ts中添加import TableModule from primeNG时。为什么会出现这个错误？我在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
      ],...

- javapedia.net

---

你尝试安装CDK了吗？npm install @angular/cdk --save - Fateme Fazli

是的，我解决了编译错误。我将尝试在组件中使用它。顺便说一下，我正在努力理解它与TableModule的依赖关系，而在primeng文档中，它被提及为依赖项：无。 - javapedia.net

你正在使用哪个版本的Angular和PrimeNG？ - Fateme Fazli

"@angular/core": "~7.1.0", "primeicons": "^1.0.0", "primeng": "^7.1.0", - javapedia.net

请查看 https://github.com/primefaces/primeng/commit/03e6546ab67d7cd045c45c612aad7ae44b77ae91，Primeng在7.1.0版本中使用CDK作为开发依赖。 - Fateme Fazli

Answer 1

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

需要它是因为 p-table 使用了 p-paginator，而 p-paginator 又使用了 p-dropdown，所以它需要 cdk。

您可以在此处进行检查：

• 表格： 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

- Daniel Piñeiro

---

对我有用，但我之后还必须重新启动我的 IDE 才能被识别，仅重新编译和重启进程是不够的（使用 WebStorm）。 - Peter Andreas Moelgaard

那么，安装需要 cdk 的 npm 模块并不意味着 cdk 会被安装，如果需要的话？ - Display name

奇怪，我认为prime-ng至少应该在其package.json中将@angular/cdk列为对等依赖项。或者在文档中提到需要安装CDK。让每个人在使用Table模块时都遇到这个错误并不是很友好的开发方式。 - spierala

Answer 2

你使用的是哪个版本的Angular？从上一个版本开始，Angular 9已经删除了ScrollDispatchModule，它在'@angular/cdk/scrolling'中。你可以在不导入该模块的情况下使用它。如果没有，你可以导入ScrollingModule代替它。

- CodeMind

Answer 3

更新一下

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

要解决此问题，您需要安装 angular/cdk，如已在接受的响应中提到的那样。

- Luca Di Lenardo

Answer 4

只需安装与您的cdk兼容的primeng版本即可，反之亦然。但更改您的cdk版本以适应primeng可能会影响您已经安装的其他依赖项和软件包。

- Ahmed Mujtaba

Answer 5

请检查您的“package.json”文件以确认是否已安装"@angular/cdk"。如果没有安装，请进行安装。如果已经安装，请按“CTRL C”剪切并使用“ng serve”进行保留。

- Ib Abayomi Alli

Answer 6

根据 primeNg 文档，您需要安装 CDK 包：

npm install @angular/cdk --save

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

- Hamid

---

@Daniel Piñeiro 已经提到了这个。 - Chukwuemeka Maduekwe

Answer 7

ng add @angular/material

选择一个预先构建的主题名称，或者选择“自定义”以使用自定义主题：Indigo/Pink ❯ Indigo/Pink [ 预览: https://material.angular.io?theme=indigo-pink ]
❯ Deep Purple/Amber [ 预览: https://material.angular.io?theme=deeppurple-amber ]
❯ Pink/Blue Grey [ 预览: https://material.angular.io?theme=pink-bluegrey ]
❯ Purple/Green [ 预览: https://material.angular.io?theme=purple-green ]
选择 Hammer.js（手势识别支持）和 Angular 浏览器动画服务。
# 设置 HammerJS 以进行手势识别？(Y/n) = Y
# ? 为 Angular Material 设置浏览器动画？(Y/n) = Y

- S sabeer

---

这显然是从这里复制的。来自评论。 - Wai Ha Lee