如何在Angular 6中安装Bootstrap 4 + jQuery + Popper.js

Question

我已经安装并更新了Angular和Node到最新版本。

    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

我使用npm安装了Bootstrap 4，虽然它能够正常工作，但是下拉菜单和模态框功能无法使用，因为jquery和popper.js没有像在Angular 5中那样被导入。

我采取了以下步骤： 1- 运行命令npm install bootstrap@next --save 2- 运行命令npm install jquery --save 3- 运行命令npm install popper.js --save

我将这些内容添加到angular.json文件中，因为没有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"
      ],

- Jawad Farooqi

---

如果你只是为了使用Bootstrap而需要jQuery，那么请安装ng-bootstrap。 - David

David，ng-bootstrap安装的是最新版本的Bootstrap吗？ - Joel Garcia Nuño

你需要自己安装Bootstrap CSS，而ng-bootstrap则提供了使用Angular编写的原生Bootstrap组件（下拉菜单、模态框等），无需jQuery。 - David

Answer 1

不要忘记运行以下命令：

npm i tether --save

接下来在 angular.json 中将 tether 路径放在jquery和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"]

- André Rodrigues

Answer 2

这是我如何在Angular 9中安装它的方式

npm install --save bootstrap jquery popper.js

- R15