将引导程序添加到 Angular 12.1.4 - 无法解析依赖关系树

Question

我正在尝试在新的角度应用程序中安装引导程序，但它不起作用

\n

ng add @ng-bootstrap/ng-bootstrap\n

\n

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

\n

The package @ng-bootstrap/ng-bootstrap@10.0.0 will be installed and executed.  \nWould you like to proceed? Yes\nnpm ERR! code ERESOLVE\nnpm ERR! ERESOLVE unable to resolve dependency tree\nnpm ERR!\nnpm ERR! While resolving: how-to-test@0.0.0\nnpm ERR! Found: @angular/compiler@12.1.5\nnpm ERR! node_modules/@angular/compiler\nnpm ERR!   @angular/compiler@"~12.1.0" from the root project\nnpm ERR!\nnpm ERR! Could not resolve dependency:\nnpm ERR! peer @angular/compiler@"12.2.0" from @angular/localize@12.2.0\nnpm ERR! node_modules/@angular/localize\nnpm ERR!   peer @angular/localize@"^12.0.0" from @ng-bootstrap/ng-bootstrap@10.0.0\nnpm ERR!   node_modules/@ng-bootstrap/ng-bootstrap\nnpm ERR!     @ng-bootstrap/ng-bootstrap@"10.0.0" from the root project\nnpm ERR!\nnpm ERR! Fix the upstream dependency conflict, or retry\nnpm ERR! this command with --force, or --legacy-peer-deps\nnpm ERR! to accept an incorrect (and potentially broken) dependency resolution.npm ERR!\nnpm ERR! See C:\\Users\\Andrew\\AppData\\Local\\npm-cache\\eresolve-report.txt for a \nfull report.\n\nnpm ERR! A complete log of this run can be found in:\nnpm ERR!     C:\\Users\\Andrew\\AppData\\Local\\npm-cache\\_logs\\2021-08-04T19_50_44_840Z-debug.log\n\xe2\x9c\x96 Package install failed, see above.\n

\n

我的角度版本详细信息如下

\n

Angular CLI: 12.1.4\nNode: 15.8.0 (Unsupported)\nPackage Manager: npm 7.20.3\nOS: win32 x64\n\nAngular: 12.1.5\n... animations, common, compiler, compiler-cli, core, forms\n... platform-browser, platform-browser-dynamic, router\n\nPackage                         Version\n---------------------------------------------------------\n@angular-devkit/architect       0.1201.4\n@angular-devkit/build-angular   12.1.4\n@angular-devkit/core            12.1.4\n@angular-devkit/schematics      12.1.4\n@angular/cli                    12.1.4\n@schematics/angular             12.1.4\nrxjs                            6.6.7\ntypescript                      4.3.5\n

\n

有人可以帮忙提供一个好的答案吗？因为所有这些似乎有一天都有效，但第二天就不起作用了。

\n

更新 05/08/2021

\n

我仍然无法让它工作，我尝试了这些步骤。

\n

npm uninstall -g @angular/cli\nnpm install -g @angular/cli@12.0.0\n

\n

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

\n

npm uninstall --save-dev @angular/cli\nnpm install --save-dev @angular/cli@12.0.0\n\nnpm install\n

\n

跑步

\n

ng version\n

\n

给我这个：

\n

Angular CLI: 12.2.0\nNode: 14.17.4\nPackage Manager: npm 7.20.3\nOS: win32 x64\n\nAngular: 12.0.5\n... animations, common, compiler, compiler-cli, core, forms\n... platform-browser, platform-browser-dynamic, router\n\nPackage                         Version\n---------------------------------------------------------\n@angular-devkit/architect       0.1200.5\n@angular-devkit/build-angular   12.0.5\n@angular-devkit/core            12.0.5\n@angular-devkit/schematics      12.2.0\n@angular/cli                    12.2.0\n@schematics/angular             12.2.0\nrxjs                            6.6.7\ntypescript                      4.2.4\n

\n

然后当我运行这个时

\n

ng add @ng-bootstrap/ng-bootstrap\n

\n

我在 @angular/compiler 上遇到了类似的问题。\n这位于package-lock.json文件中。为什么我安装的是12.0.0时却显示12.0.5。（红润令人困惑）？

\n

The package @ng-bootstrap/ng-bootstrap@10.0.0 will be installed and executed.\nWould you like to proceed? Yes\nnpm ERR! code ERESOLVE\nnpm ERR! ERESOLVE unable to resolve dependency tree\nnpm ERR!\nnpm ERR! While resolving: how-to-test@0.0.0\nnpm ERR! Found: @angular/compiler@12.0.5\nnpm ERR! node_modules/@angular/compiler\nnpm ERR!   @angular/compiler@"~12.0.0" from the root project\nnpm ERR!\nnpm ERR! Could not resolve dependency:\nnpm ERR! peer @angular/compiler@"12.2.0" from @angular/localize@12.2.0\nnpm ERR! node_modules/@angular/localize\nnpm ERR!   peer @angular/localize@"^12.0.0" from @ng-bootstrap/ng-bootstrap@10.0.0\nnpm ERR!   node_modules/@ng-bootstrap/ng-bootstrap\nnpm ERR!     @ng-bootstrap/ng-bootstrap@"10.0.0" from the root project\nnpm ERR!\nnpm ERR! Fix the upstream dependency conflict, or retry\nnpm ERR! this command with --force, or --legacy-peer-deps\nnpm ERR! to accept an incorrect (and potentially broken) dependency resolution.\nnpm ERR!\n

\n

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 class、css、js :)