使用 Bootstrap 4 和 Angular 4

Question

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

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

Answer 2

观看视频或按照步骤操作

Install bootstrap 4 in angular 4 / angular 5

有两种方法可以在您的项目中包含 bootstrap
1) 在 index.html 文件
中添加 CDN Link 2) 使用 npm

安装 bootstrap

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

1) 使用 npm

安装 bootstrap

npm install bootstrap@next --save

安装完Bootstrap4后，我们还需要两个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 目录中可用 angular 打开那个文件并添加 [= styles[] 和 scripts[] 路径中的 61=]、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现在工作正常

使用 Bootstrap 4 和 Angular 4

Using Bootstrap 4 with Angular 4

tether

angular