angular bootstrap在angular 13项目中给出了误差

Question

我正试图在我的Angular 13项目中安装Angular引导程序，如下所示：

ng添加@ng引导程序/ng引导程序

但我在这个声明上一按Y就出现错误

程序包@ng引导程序/ng-bootstrap@11.0.0将被安装并执行。你想继续吗？是

错误如下：

npm ERR！代码ERESOLVEnpm ERR！ERESOLVE无法解析依赖关系树npm ERR！npm ERR！解决时：blog@0.0.0npm ERR！找到：@angular/compiler@13.0.3npm ERR！node_modules/@angular/编译器npm ERR@angular/编译器@"~13.0.0〃；从根项目npm ERR！npm ERR！无法解析依赖项：npm ERR！peer@angular/compiler@"；13.1.3"；来自@angular/localize@13.1.3npm ERR！node_modules/@angular/localizenpm ERR！peer@有角度/本地化@"^13.0.0〃；来自@ng引导程序/ng-bootstrap@11.0.0npm ERR！node_modules/@ng引导程序/ng引导程序npm ERR@ng引导/ng引导@"；11.0.0〃；从根项目npm ERR！npm ERR！修复上游依赖关系冲突，或重试npm ERR！该命令带有--force或--legacy peer depsnpm ERR！接受不正确的(并且可能已损坏的(依赖关系解析。npm ERR！npm ERR！有关完整报告，请参阅/Users/sifhameed/.npm/eresolve-report.txt。

npm ERR！此运行的完整日志可在以下位置找到：npm ERR/用户/asifhameed/.npm/\logs/2022-01-25T04_11_31_152Z-debug.log✖程序包安装失败，请参阅上文。

以下是我的project.json文件中的依赖项和devdependencies。

"dependencies": {
"@angular/animations": "~13.0.0",
"@angular/common": "~13.0.0",
"@angular/compiler": "~13.0.0",
"@angular/core": "~13.0.0",
"@angular/forms": "~13.0.0",
"@angular/platform-browser": "~13.0.0",
"@angular/platform-browser-dynamic": "~13.0.0",
"@angular/router": "~13.0.0",
"rxjs": "~7.4.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~13.0.4",
"@angular/cli": "~13.0.4",
"@angular/compiler-cli": "~13.0.0",
"@types/jasmine": "~3.10.0",
"@types/node": "^12.11.1",
"jasmine-core": "~3.10.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.4.3"
}

Answer 1

首先尝试此命令

npm config set legacy-peer-deps true 

上述命令允许安装错误中所述的遗留软件包以及

如果您是Linux用户，请尝试在开始的中使用sudo

此命令之后，运行以下命令

npm i @ng-bootstrap/ng-bootstrap

Answer 2

我想将ngboostrap与boostrap v5.1.3一起使用。我终于做到了，但使用了ngbootstrap网站推荐的非稳定版本：https://ng-bootstrap.github.io/#/home

Bootstrap 5的Beta版支持提供12.0.0-Beta.X您可以通过npm install@ng引导程序安装/ng-bootstrap@bootstrap5

那么我是如何解决这样一个问题的。

首先，让我们进行一些清理：

• 删除当前引导程序版本，删除node_modules文件夹，运行npm缓存清理并重新安装所有节点模块：

命令：

npm uninstall bootstrap
npm cache clean --force
npm install

• 现在继续ngbootstrap建议的手动安装：https://ng-bootstrap.github.io/#/getting-已启动

安装引导程序(这将安装最后一个版本(：

npm install bootstrap

如果您使用CSS，请将CSS文件引用放在angular.json文件中：

"yourApp": {   "architect": {
"build": {
"options": {
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css"
]
}
}   } }

• 如果您使用Angular≥9.0.0和ng bootstrap≥6.0.0，您还必须安装@Angular/localize polyfill：

命令

ng add @angular/localize

最后，通过使用遗留的peer-deps选项安装ngbootstrap测试版，以绕过peerDependency自动安装->它告诉npm忽略对等deps，并在所有情况下继续安装。

npm install @ng-bootstrap/ng-bootstrap@bootstrap5 --legacy-peer-deps

你的package.json文件应该看起来像

...
"@ng-bootstrap/ng-bootstrap": "^12.0.0-beta.4",
"bootstrap": "^5.1.3",
...

在应用程序模块中，您需要导入NgbModule:

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
imports: [... NgbModule ...

现在，如果你为你的应用程序(ng-server(提供服务，如果你没有安装popperjs/core模块，你会收到这个错误！这违背了ngbootstrap官方文档中的说法(…也不应该包括其他依赖项，如jQuery或popper.js。这不是必要的，可能会干扰ngbootstrapp代码。(错误：

./node_modules/@ng-bootstrap/ng-bootstrap/fesm2020/ng-bootstrap.mjs:9:0-88 - Error: Module not found: Error: Can't resolve '@popperjs/core' in '/Users/youssef/GitHub/trainings/oshop/node_modules/@ng-bootstrap/ng-bootstrap/fesm2020'
Error: node_modules/@ng-bootstrap/ng-bootstrap/util/positioning.d.ts:1:55 - error TS2307: Cannot find module '@popperjs/core' or its corresponding type declarations.
1 import { Placement as PopperPlacement, Options } from '@popperjs/core';

因此，要解决此问题，您需要安装popperjs/core:

npm i @popperjs/core

我认为ngbootstrap团队需要在下一个版本中考虑这个问题。

现在玩得开心：

<ul
class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"
>
<li><a href="#" class="nav-link px-2 text-secondary" [routerLink]="['/']" >Home</a></li>
<li><a href="#" class="nav-link px-2" [routerLink]="['/shopping-cart']" >Shopping Cart</a></li>
<li ngbDropdown class="nav-item dropdown">
<a ngbDropdownToggle class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul ngbDropdownMenu class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</li>
</ul> 

Answer 3

我使用下面的commands解决了这个问题。首次使用

npm config set legacy-peer-deps true。然后使用低于一个

ng add @ng-bootstrap/ng-bootstrap