4

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"
      ],
3
  • 1
    If you need jquery just for bootstrap, install ng-bootrap instead
    – David
    May 5, 2018 at 20:46
  • @David the ng-bootstrap install the lastet of bootstrap ? May 5, 2018 at 21:04
  • You need to install bootstrap css yourself and ng-bootstrap provide native implementations for bootstrap components (dropdown, modal,...) written with angular without jQuery.
    – David
    May 5, 2018 at 21:07

2 Answers 2

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

This is how I have installed it with Angular 9

npm install --save bootstrap jquery popper.js

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.