如何在Angular 6环境中安装Bootstrap 4、jQuery及Popper.js

嘿，很高兴看到你已经把Angular和Node都更新到指定版本了！针对你的Angular 6环境，下面是一步步安装Bootstrap 4、jQuery和Popper.js的实操方法，确保它们能完美集成到你的项目中：

1. 安装所需依赖包 #

首先打开终端，进入项目根目录，执行下方npm命令一次性安装三个依赖：

npm install bootstrap jquery popper.js --save

这里的--save参数会自动把这三个包添加到项目的package.json依赖列表中，方便后续项目迁移和版本管理。

2. 配置Angular CLI（angular.json） #

Angular 6使用angular.json管理项目配置，你需要在这个文件中配置样式与脚本的引入路径：

1. 打开项目根目录下的angular.json文件
2. 找到projects -> 你的项目名称 -> architect -> build -> options区域
3. 在styles数组中添加Bootstrap的CSS路径：

   "styles": [
     "./node_modules/bootstrap/dist/css/bootstrap.min.css",
     "src/styles.css" // 保留你原有的全局样式文件
   ]
   

4. 在scripts数组中按顺序添加jQuery、Popper.js和Bootstrap的JS路径（顺序很重要，Bootstrap依赖前两者）：

   "scripts": [
     "./node_modules/jquery/dist/jquery.min.js",
     "./node_modules/popper.js/dist/umd/popper.min.js",
     "./node_modules/bootstrap/dist/js/bootstrap.min.js"
   ]
   

3. 验证安装是否成功 #

配置完成后，启动Angular开发服务器：

ng serve

接着在任意组件的模板文件（比如app.component.html）中添加一段Bootstrap测试代码：

<button class="btn btn-primary">测试Bootstrap按钮</button>
<div class="alert alert-success" role="alert">
  Bootstrap样式生效啦！
</div>

打开浏览器访问http://localhost:4200，如果能看到带有Bootstrap样式的按钮和提示框，且按钮交互正常，就说明安装配置成功了。

进阶小贴士（可选） #

如果你需要自定义Bootstrap样式（比如修改主题色、间距等），可以在项目全局样式文件（如styles.scss）中先导入Bootstrap源SCSS文件，再覆盖对应变量：

// 自定义Bootstrap变量
$primary: #your-custom-color;

// 导入Bootstrap源文件
@import "../node_modules/bootstrap/scss/bootstrap";

记得把angular.json中styles数组里的Bootstrap CSS路径替换为你的styles.scss路径哦。

内容的提问来源于stack exchange，提问作者Jawad Farooqi