如何通过CLI在Angular 17项目中正确引入Bootstrap

你的现有配置存在这些问题 #

• 全局安装没必要：npm install -g bootstrap完全多余，Angular项目应该依赖本地安装的包，全局安装会导致版本不一致风险，还会污染全局依赖环境。
• CSS重复引入：你同时在angular.json的style字段和style.css里@import了Bootstrap CSS，这会让CSS被加载两次，纯属冗余操作。
• 缺少必要依赖：Bootstrap的JS交互组件（下拉、模态框等）依赖@popperjs/core，没装这个的话，这些组件根本用不了。

正确的集成步骤 #

1. 本地安装依赖 #

在项目根目录执行以下命令，安装Bootstrap及其必需的依赖：

npm install bootstrap @popperjs/core

2. 配置样式与脚本（二选一即可） #

方式一：通过angular.json配置（推荐）

打开项目根目录的angular.json，定位到projects -> [你的项目名称] -> architect -> build -> options，修改styles和scripts数组：

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
  "node_modules/@popperjs/core/dist/umd/popper.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

⚠️ 注意：Popper.js必须放在Bootstrap JS前面，因为Bootstrap的交互组件依赖它。

方式二：通过style.css引入样式

如果你习惯用CSS import的方式，只需要在src/styles.css中添加：

@import 'bootstrap/dist/css/bootstrap.min.css';

务必删掉angular.json里styles数组中对应的Bootstrap CSS路径，避免重复加载。脚本部分还是按照方式一的scripts数组配置即可。

3. 验证配置 #

重启Angular开发服务器（如果之前开着的话）：

ng serve

在组件模板里写个Bootstrap组件测试，比如：

<button type="button" class="btn btn-primary">测试按钮</button>

如果样式正常显示，下拉、模态框等交互功能能正常工作，就说明配置成功了。

额外提示 #

• Angular 17用的是ES模块解析，@import里不需要加~符号，直接写路径就行，旧版本Angular的~写法在17里已经没必要了。
• 要是你只需要Bootstrap的样式，不需要JS交互组件，可以只装Bootstrap，不用装@popperjs/core，也不用配置scripts数组。

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