安装 ng-bootstrap

Question

我正在尝试在我的应用程序中安装ng-bootstrap包。

我已经使用npm i更新了我所有的 npm 包，并将@angular/core和@angular/cli模块更新到最新版本。

但是，当我尝试命令npm install --save @ng-bootstrap/ng-bootstrap时，出现以下依赖错误：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: development-toolbox@0.0.0
npm ERR! Found: @angular/core@13.3.0
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"13.3.0" from @angular/animations@13.3.0
npm ERR!   node_modules/@angular/animations
npm ERR!     peerOptional @angular/animations@"13.3.0" from @angular/platform-browser@13.3.0
npm ERR!     node_modules/@angular/platform-browser
npm ERR!       peer @angular/platform-browser@"13.3.0" from @angular/forms@13.3.0
npm ERR!       node_modules/@angular/forms
npm ERR!         @angular/forms@"~13.3.0" from the root project
npm ERR!       3 more (@angular/platform-browser-dynamic, @angular/router, the root project)
npm ERR!     @angular/animations@"~13.3.0" from the root project
npm ERR!   peer @angular/core@"13.3.0" from @angular/common@13.3.0
npm ERR!   node_modules/@angular/common
npm ERR!     peer @angular/common@"13.3.0" from @angular/forms@13.3.0
npm ERR!     node_modules/@angular/forms
npm ERR!       @angular/forms@"~13.3.0" from the root project
npm ERR!     peer @angular/common@"13.3.0" from @angular/platform-browser@13.3.0
npm ERR!     node_modules/@angular/platform-browser
npm ERR!       peer @angular/platform-browser@"13.3.0" from @angular/forms@13.3.0
npm ERR!       node_modules/@angular/forms
npm ERR!         @angular/forms@"~13.3.0" from the root project
npm ERR!       3 more (@angular/platform-browser-dynamic, @angular/router, the root project)
npm ERR!     3 more (@angular/platform-browser-dynamic, @angular/router, the root project)
npm ERR!   5 more (@angular/forms, @angular/platform-browser, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @ng-bootstrap/ng-bootstrap@"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/core@13.3.9
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"13.3.9" from @angular/forms@13.3.9
npm ERR!   node_modules/@angular/forms
npm ERR!     @angular/forms@"~13.3.0" from the root project
npm ERR!     peer @angular/forms@"^13.0.0" from @ng-bootstrap/ng-bootstrap@12.1.2
npm ERR!     node_modules/@ng-bootstrap/ng-bootstrap
npm ERR!       @ng-bootstrap/ng-bootstrap@"*" 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 D:\Users\[user]\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!     D:\Users\[User]\AppData\Local\npm-cache\_logs\2022-05-25T19_32_11_969Z-debug-0.log

如何解释此消息并解决错误？

Answer 1

从官方页面，推荐的命令是：

// Installation for Angular CLI
ng add @ng-bootstrap/ng-bootstrap

试试这个，而不是npm install

Answer 2

我总是更喜欢使用 CDN 而不是添加另一个包。 我真的不知道这是否是最好的方法，但对我来说没关系。

在您的主index.html文件中，在head标记中：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

在身体的末端：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

Answer 3

好的，所以我找到了解决方案。

1. 运行npm update以更新所有节点包
2. 使用ng --version验证 Angular 的版本。 截至本回复发布之日，我的版本是：

Angular CLI: 13.3.7
Node: 16.13.1
Package Manager: npm 8.6.0
OS: win32 x64
Angular: 13.3.10
@angular-devkit/schematics      13.3.7
@angular/cli                    13.3.7
@schematics/angular             13.3.7
rxjs                            7.5.5
typescript                      4.6.4

4. 删除你的node_modules文件夹。
5. 打开package.json并确保devDependencies与已安装的 Angular cli 匹配
6. 运行npm i
7. 安装 ng-boostrap: ng add @ng-bootstrap/ng-bootstrap

最后，如果您希望安装 ng-bootstrap 的最新版本（12.0.0 或更高版本），您将需要安装Popper依赖项。

您可以在ng-bootstrap 网站上找到有关不同版本 ng-bootstrap 和 Angular CLI 之间兼容性的更多信息。