將 Bootstrap 添加到 Angular 項目時出錯

Question

嘗試在我的 Angular 項目中運行它

ng add @ng-bootstrap/ng-bootstrap

雖然得到這個錯誤，但不知道如何解決

npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: paxium-contacts@0.0.0
npm ERR! Found: @angular/compiler@15.0.4
npm ERR! node_modules/@angular/compiler
npm ERR!   @angular/compiler@"^15.0.0" from the root project
npm ERR!   peer @angular/compiler@"15.0.4" from @angular/compiler-cli@15.0.4
npm ERR!   node_modules/@angular/compiler-cli
npm ERR!     dev @angular/compiler-cli@"^15.0.0" from the root project
npm ERR!     peer @angular/compiler-cli@"^15.0.0" from @angular-devkit/build-angular@15.0.5
npm ERR!     node_modules/@angular-devkit/build-angular
npm ERR!       dev @angular-devkit/build-angular@"^15.0.4" from the root project
npm ERR!     1 more (@ngtools/webpack)
npm ERR!   1 more (@angular/platform-browser-dynamic)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev @angular/localize@"^15.0.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/compiler@15.1.0
npm ERR! node_modules/@angular/compiler
npm ERR!   peer @angular/compiler@"15.1.0" from @angular/localize@15.1.0
npm ERR!   node_modules/@angular/localize
npm ERR!     dev @angular/localize@"^15.0.0" 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.

✖ Package install failed, see above.
The Schematic workflow failed. See above.

Answer 1

在這里，您為 Angular 的每個版本關聯了 ng-bootstrap 的版本。

ng-bootstrap Angular bootstrap.css Poper
9.x.x         11.0.0    4.5.0   
10.x.x        12.0.0    4.5.0   
11.x.x        13.0.0    4.6.0   
12.x.x        13.0.0    5.0.0       2.10.2
13.x.x        14.1.0    5.2.0       2.10.2
14.x.x        15.0.0    5.2.3       2.11.6

因此，如果您的應用程序位於 Angular 13，例如您需要安裝 ng-bootstrap 12.xx

ng add @ng-bootstrap/ng-bootstrap@12.1.2

在這個鏈接中看到你有“更新日志”，所以根據你的 Angular 版本選擇更大的版本

注意：也許您更願意將您的應用程序升級到最高版本 Angular

Answer 2

我想你可以嘗試刪除"node_modules"文件夾和"package-lock.json" ，然后運行npm i

Answer 3

使用 npm 安裝 bootstrap： npm i bootstrap. 然后在angular.json文件-> 在"styles" array中添加"node_modules/bootstrap/dist/css/bootstrap.min.css"並在script array中添加"node_modules/bootstrap/dist/js/bootstrap.min.js"