在 Angular CLI 中使用 Bootstrap 的最佳方法是什么答案

【问题标题】：What is the best way for using Bootstrap in Angular CLI在 Angular CLI 中使用 Bootstrap 的最佳方法是什么
【发布时间】：2017-05-26 06:05:35
【问题描述】：

在 Angular-Cli 项目中使用 Bootstrap 的最佳实践是哪一个？

使用此方法： https://medium.com/@beeman/tutorial-add-bootstrap-to-angular-cli-apps-b0a652f2eb2

或者

使用 ngx-bootstrap： https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/ng-cli.md

【问题讨论】：

标签： twitter-bootstrap angular angular-cli

【解决方案1】：

对我来说最好的方法是：

使用ng new 创建一个项目
使用npm install bootstrap@4.0.0-alpha.6 jquery font-awesome 安装 bootstrap、jquery 和 font-awesome
在你的.angular-cli.jsonadd:

"apps": [{ "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css", "../node_modules/font-awesome/css/font-awesome.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ]

这将自动在您的 index.html 中编译 bootstrap js 所需的 bootstrap css 和 javascript、font-awesome 和 jquery。

注意：必须在包含bootstrap.min.js之前包含脚本下的jquery.min.js，因为bootstrap.min.js需要jquery.min.js才能正常工作。

更新： Bootstrap 4 需要 tether.js。使用 npm install tether 安装它并将其添加到 .angular-cli.jsonBEFORE bootstrap.min.js 中的脚本中。

"scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/tether/dist/js/tether.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"

【讨论】：

嗨，感谢您的回答，我使用了您的方式，但是在 ng serve 之后，我在我的 chrome 控制台中看到错误消息：引导工具提示需要 Tether

【解决方案2】：

在任何 Angular 项目中，首选使用 ng-bootstrap 而非 bootstrap。

以下是来自documentation的评论。

ng-bootstrap 的目标是完全替换组件的 JavaScript 实现。您也不应该包含其他依赖项，例如 jQuery 或 popper.js。这不是必需的，并且可能会干扰 ng-bootstrap 代码。

【讨论】：