angular - 将 Bootstrap 添加到 angular 12.1.4 - 无法解析依赖树

Question

我正在尝试在新的 angular 应用程序中安装 Bootstrap ，但它不起作用

ng add @ng-bootstrap/ng-bootstrap

我在下面收到这个错误，我需要做什么来解决这个问题？

The package @ng-bootstrap/ng-bootstrap@10.0.0 will be installed and executed.  
Would you like to proceed? Yes
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: how-to-test@0.0.0
npm ERR! Found: @angular/compiler@12.1.5
npm ERR! node_modules/@angular/compiler
npm ERR!   @angular/compiler@"~12.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler@"12.2.0" from @angular/localize@12.2.0
npm ERR! node_modules/@angular/localize
npm ERR!   peer @angular/localize@"^12.0.0" from @ng-bootstrap/ng-bootstrap@10.0.0
npm ERR!   node_modules/@ng-bootstrap/ng-bootstrap
npm ERR!     @ng-bootstrap/ng-bootstrap@"10.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.npm ERR!
npm ERR! See C:\Users\Andrew\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!     C:\Users\Andrew\AppData\Local\npm-cache\_logs\2021-08-04T19_50_44_840Z-debug.log
✖ Package install failed, see above.

我的 Angular 版本详细信息如下

Angular CLI: 12.1.4
Node: 15.8.0 (Unsupported)
Package Manager: npm 7.20.3
OS: win32 x64

Angular: 12.1.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1201.4
@angular-devkit/build-angular   12.1.4
@angular-devkit/core            12.1.4
@angular-devkit/schematics      12.1.4
@angular/cli                    12.1.4
@schematics/angular             12.1.4
rxjs                            6.6.7
typescript                      4.3.5

任何人都可以帮助一个好的答案吗？因为所有这些似乎有一天会奏效，但第二天就不行了。
2021 年 5 月 8 日更新
我仍然无法让它工作，我尝试了这些步骤。

npm uninstall -g @angular/cli
npm install -g @angular/cli@12.0.0

我也卸载并重新安装了 node.js，版本 14.17.4

npm uninstall --save-dev @angular/cli
npm install --save-dev @angular/cli@12.0.0

npm install

运行

ng version

给我这个:

Angular CLI: 12.2.0
Node: 14.17.4
Package Manager: npm 7.20.3
OS: win32 x64

Angular: 12.0.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.5
@angular-devkit/build-angular   12.0.5
@angular-devkit/core            12.0.5
@angular-devkit/schematics      12.2.0
@angular/cli                    12.2.0
@schematics/angular             12.2.0
rxjs                            6.6.7
typescript                      4.2.4

然后当我运行这个

ng add @ng-bootstrap/ng-bootstrap

我在@angular/compiler 上遇到了类似的问题。
这位于 package-lock.json 文件。为什么我安装 12.0.0 时显示 12.0.5。 (红润迷惑)？

The package @ng-bootstrap/ng-bootstrap@10.0.0 will be installed and executed.
Would you like to proceed? Yes
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: how-to-test@0.0.0
npm ERR! Found: @angular/compiler@12.0.5
npm ERR! node_modules/@angular/compiler
npm ERR!   @angular/compiler@"~12.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler@"12.2.0" from @angular/localize@12.2.0
npm ERR! node_modules/@angular/localize
npm ERR!   peer @angular/localize@"^12.0.0" from @ng-bootstrap/ng-bootstrap@10.0.0
npm ERR!   node_modules/@ng-bootstrap/ng-bootstrap
npm ERR!     @ng-bootstrap/ng-bootstrap@"10.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.
npm ERR!

Answer 1

第一种方式:安装 bootstrap在您的 angular 12像下面这样的应用程序。这仅适用于 css输入。

npm install bootstrap --save

现在你需要导入 bootstrap css在 style.css像这样的文件:

@import "~bootstrap/dist/css/bootstrap.css";

第二种方式:安装 bootstrap与 jquery和 popper js如下所示，因此您可以导入 bootstrap css和 bootstrap js功能。

npm install bootstrap --save
npm install jquery --save
npm install popper.js --save

成功运行上述命令后，将其导入 angular.json像这样的文件:

 "styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.css"
  ],
  "scripts": [
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/popper.js/dist/umd/popper.min.js",
      "node_modules/bootstrap/dist/js/bootstrap.min.js"
  ]

现在您可以按预期轻松使用 Bootstrap 类、css、js :)