[英]Installing ng-bootstrap
I am trying to install the ng-bootstrap
package in my app.我正在尝试在我的应用程序中安装ng-bootstrap
包。
I have updated all of my npm packages using npm i
as well as updating the @angular/core
and @angular/cli
modules to the latest version.我已经使用npm i
更新了我所有的 npm 包,并将@angular/core
和@angular/cli
模块更新到最新版本。
However, when I try the command npm install --save @ng-bootstrap/ng-bootstrap
, I get the following dependency error:但是,当我尝试命令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
How do I interpret this message and solve the error?如何解释此消息并解决错误?
From the official page, the recommended command is:从官方页面,推荐的命令是:
// Installation for Angular CLI
ng add @ng-bootstrap/ng-bootstrap
Try that instead of npm install
试试这个,而不是npm install
I always prefer to use the CDN instead of adding another package.我总是更喜欢使用 CDN 而不是添加另一个包。 I don't really know if it is the best way to do it, but for me it is okay.我真的不知道这是否是最好的方法,但对我来说没关系。
Inside your main index.html
file, in the head
tag:在您的主index.html
文件中,在head
标记中:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
And at the end of the body:在身体的末端:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
Okay, so I found a solution.好的,所以我找到了解决方案。
npm update
to update all your node packages运行npm update
以更新所有节点包ng --version
.使用ng --version
验证 Angular 的版本。 As of the date of publication of this response, my version is:截至本回复发布之日,我的版本是: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
node_modules
folder.删除你的node_modules
文件夹。package.json
and make sure that the devDependencies
match those of the installed angular cli打开package.json
并确保devDependencies
与已安装的 Angular cli 匹配npm i
运行npm i
ng add @ng-bootstrap/ng-bootstrap
安装 ng-boostrap: ng add @ng-bootstrap/ng-bootstrap
Lastly you will need to install the Popper dependency if you count on installing the latest version (12.0.0 or above) of ng-bootstrap.最后,如果您希望安装 ng-bootstrap 的最新版本(12.0.0 或更高版本),您将需要安装Popper依赖项。
You can find more information on compatibility among the different versions of ng-bootstrap and the Angular CLI on the ng-bootstrap website .您可以在ng-bootstrap 网站上找到有关不同版本 ng-bootstrap 和 Angular CLI 之间兼容性的更多信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.