如何使用 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 安装bootstrap@next --保存 2- npm install jquery --save 3- npm 安装波普尔.js --保存

并将其添加到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"
],

Answer 1

不要忘记运行：

npm i tether --save

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

Answer 2

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

npm install --save bootstrap jquery popper.js