将 Bootstrap 4 与 Angular 4 一起使用答案

【问题标题】：Using Bootstrap 4 with Angular 4将 Bootstrap 4 与 Angular 4 一起使用
【发布时间】：2018-05-06 00:13:49
【问题描述】：

在 Angular 4 中安装 Bootstrap 4 后，出现错误： [脚本加载器] 错误：引导工具提示需要 Tether (http://tether.io/)。我尝试安装系绳，通过系绳 CDN，但它没有帮助。

【问题讨论】：

向我们展示您的代码？根据你所说的，它应该工作。确保在 Bootstrap 之前包含 Tether。

【解决方案1】：

在 angular-cli.json 文件中添加对 tether.min.css 的引用

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

【讨论】：

经过多次反复试验，我发现了这个网站coursetro.com/posts/design/72/Installing-Bootstrap-4-Tutorial。它有帮助。我在 bootstrap.min.js 之前添加了 tether.min.js 并修复了错误。
我很高兴它有帮助。祝您编码愉快；）
错误答案，Bootstrap 4 使用 popper，而不是 tether

【解决方案2】：

观看视频或按照步骤操作

Install bootstrap 4 in angular 4 / angular 5

有两种方法可以在您的项目中包含引导程序
1) 在 index.html 文件中添加 CDN 链接
2) 使用 npm 安装引导程序

我建议您遵循 2 种使用 npm 安装引导程序的方法，因为它在您的项目目录中可用

1) 使用 npm 安装引导程序

npm install bootstrap@next --save

Bootstrap 4安装完成后，我们还需要两个javascript包，即Jquery和Popper.js，没有这两个包bootstrap是不完整的

2) 安装 JQUERY

npm install jquery --save

3) 安装 Popper.js

npm install popper.js --save

现在 Bootstrap 已安装在 node_modules 文件夹内的项目目录中

打开 .angular-cli.json 这个文件在你的 angular 目录中可用打开该文件并在 styles[] 和 scripts[] 路径见下例

"styles": [   
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
  ],
  "scripts": [  

    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js",
    "../node_modules/popper.js/dist/umd/popper.min.js"
  ],

注意：不要改变js文件的顺序应该是这样的

现在 Bootstrap 工作正常

【讨论】：