angular - 将 Bootstrap 4 与 Angular 4 一起使用

Question

在 Angular 4 中安装 Bootstrap 4 后，我收到一个错误：[Script Loader] Error: Bootstrap tooltips require Tether ( http://tether.io/ )。我尝试安装系绳，通过系绳 CDN，但它有帮助。

Answer 1

观看视频或按照步骤操作

在 angular 4 / angular 5 中安装 bootstrap 4

有两种方法可以在项目中包含引导程序
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 目录中可用 打开那个文件并在style[]和scripts[]路径中添加 bootstrap、jquery 和 popper.js 文件的路径见下面的例子

"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 现在工作正常

Answer 2

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