如何使用 Angular 6 安装 bootstrap 4 + jquery + popper.js

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

Answer 1

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

Answer 2

这就是我用 Angular 9 安装它的方式

npm install --save bootstrap jquery popper.js