How to install bootstrap 4 + jquery + popper.js with Angular 6

Question

I've installed and updated Angular and Node to the latest version

    Angular CLI: 6.0.0
    Node: 8.11.1
    OS: win32 x64
    Angular: 6.0.0
    ... animations, cli, common, compiler, compiler-cli, core, forms
    ... http, language-service, platform-browser
    ... platform-browser-dynamic, router

     Package                                                                   
     -----------------------------------------------------------
    @angular-devkit/architect         0.6.0
    @angular-devkit/build-angular     0.6.0
    @angular-devkit/build-optimizer   0.6.0
    @angular-devkit/core              0.6.0
    @angular-devkit/schematics        0.6.0
    @ngtools/webpack                  6.0.0
    @schematics/angular               0.6.0
    @schematics/update                0.6.0
    rxjs                              6.1.0
    typescript                        2.7.2
    webpack                           4.6.0

Installed Bootstrap 4 via npm and it is working though but dropdowns and modals are not working because jquery and popper.js are not importing the way they used to be in angular 5.

This is what i did: Installed the following 1- npm install bootstrap@next --save 2- npm install jquery --save 3- npm install popper.js --save

and added that to angular.json because there is no angular.cli.json

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

If you need jquery just for bootstrap, install ng-bootrap instead — David
– David, Commented May 5, 2018 at 20:46
You need to install bootstrap css yourself and ng-bootstrap provide native implementations for bootstrap components (dropdown, modal,...) written with angular without jQuery. — David
– David, Commented May 5, 2018 at 21:07

André Rodrigues · Accepted Answer · 2018-05-10 01:29:26Z

3

Dont forget to run:

npm i tether --save

Next in angular.json put the tether path among jquery and bootstrap

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

answered May 10, 2018 at 1:29

André Rodrigues

3833 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arvind Chourasiya · Accepted Answer · 2020-08-22 15:59:31Z

0

This is how I have installed it with Angular 9

npm install --save bootstrap jquery popper.js

answered Aug 22, 2020 at 15:59

Arvind Chourasiya

17.7k15 gold badges123 silver badges212 bronze badges

Collectives™ on Stack Overflow

How to install bootstrap 4 + jquery + popper.js with Angular 6

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related