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

jquery angular bootstrap-4 popper.js angular6
Jawad Farooqi picture Jawad Farooqi · May 5, 2018 · Viewed 7k times · Source

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

Answer

André Rodrigues picture André Rodrigues · May 10, 2018

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

Related questions

How to use jQuery with Angular?

Can anyone tell me, how to use jQuery with Angular? class MyComponent { constructor() { // how to query the DOM element from here? } } I'm aware there are workarounds like manipulating the class or id of the DOM element upfront, but I'm hoping …

Read More
How to handle query parameters in angular 2

In my routable component I have @RouteConfig { {path: '/login', name: 'Login', component: LoginComponent} } But how do I get the query params if I go to app_url/login?token=1234?

Read More
How to use date picker in Angular 2?

I have tried many date picker in my angular2 app but none of them is working.Although the date picker is displaying on the view but the value of selected date is not getting in the ngModel variable.

Read More