Angular 中 Ngb 引导程序的依赖关系问题答案

【问题标题】：Dependencies issue with Ngb bootstrap in AngularAngular 中 Ngb 引导程序的依赖关系问题
【发布时间】：2020-08-22 20:51:45
【问题描述】：

我是 Angular 的新手，我正在尝试使用 ng bootstrap 的组件以 Angular 创建一个图像滑块轮播，但是在我创建了一个 Angular 项目之后，我已经使用 npm install --save @ng-bootstrap/ng-bootstrap 安装了“ng bootstrap”（在项目中）并拥有使用 import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; 将其导入 app.module.ts。

我还在项目中安装了ng add @angular/localize，但我不确定它向我显示以下错误：

ERROR in The target entry-point "@ng-bootstrap/ng-bootstrap" has missing dependencies:
 - tslib
 - @angular/core
 - @angular/common
 - @angular/forms
 - rxjs
 - rxjs/operators

我正在关注https://ng-bootstrap.github.io/#/getting-started。接下来我应该尝试什么？

【问题讨论】：

标签： angular twitter-bootstrap

【解决方案1】：

我建议除了 Bootstrap 之外还安装 jQuery 和 Popper.js：

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

在您的项目文件夹中转到 src/styles.cs 并添加以下代码行

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

然后转到 src/angular.json 并将以下行添加到“脚本”：

 "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"
]

希望对您有所帮助。

【讨论】：

添加后，应用程序加载但屏幕为空白，没有显示任何内容
按照前面的步骤，您不必从引导程序中添加“ngbModule”，您可以直接在所有项目中使用引导程序类。

【解决方案2】：

确保您位于项目的根文件夹中，然后运行此命令

ng add @ng-bootstrap/ng-bootstrap

或

npm i --save @ng-bootstrap/ng-bootstrap

【讨论】：