Using Bootstrap 4 with Angular 4

Question

After installing Bootstrap 4, in Angular 4, I am getting an error : [Script Loader] Error: Bootstrap tooltips require Tether (http://tether.io/). I tried installing tether, passing tether CDN but it dint help.

Answer 1

Add the reference to tether.min.css in your angular-cli.json file

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

Watch Video or Follow the step

Install bootstrap 4 in angular 4 / angular 5

There is two way to include bootstrap in your project
1) add CDN Link in index.html file
2) Install bootstrap using npm

I recommended you following 2 methods that are installed bootstrap using npm because its available on your project directory

1) install bootstrap using npm

npm install bootstrap@next --save

after the installation of Bootstrap 4, we Need two More javascript Package that is Jquery and Popper.js without these two package bootstrap is not complete

2) Install JQUERY

npm install jquery --save

3) Install Popper.js

npm install popper.js --save

Now Bootstrap is Install on you Project Directory inside node_modules Folder

open .angular-cli.json this file are available on you angular directory open that file and add the path of bootstrap, jquery, and popper.js files inside styles[] and scripts[] path see the below example

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

Note: Don't change a sequence of js file it should be like this

Now Bootstrap Working fine Now