安装Bootstrap 4后Angular 5出现@angular/core相关错误求助

架构老林

2026-5-25

解决Angular 5安装Bootstrap 4后@angular/core相关错误的方案

我之前维护老项目时也碰到过一模一样的问题，这大概率是Bootstrap 4的版本与Angular 5的依赖不兼容导致的冲突——毕竟Angular 5是比较早期的版本，而Bootstrap 4后续迭代的版本可能依赖了更高版本的@angular/core或相关配套包，从而触发了依赖冲突。

下面是一步步的解决办法：

第一步：检查当前Bootstrap版本
打开项目根目录下的package.json文件，找到bootstrap对应的版本号。如果是4.2.x及以上的版本，很大概率就是版本不匹配的问题，Angular 5更适配Bootstrap 4的早期稳定版本，比如4.1.x系列。
第二步：重新安装兼容的Bootstrap版本
先卸载当前的Bootstrap：
```
npm uninstall bootstrap
```
然后安装指定的兼容版本（比如4.1.3，这个版本和Angular 5适配性很好）：
```
npm install bootstrap@4.1.3 --save
```
第三步：清理依赖缓存并重新安装所有包
有时候缓存会残留冲突的依赖文件，需要彻底清理：
1. 删除项目根目录下的node_modules文件夹和package-lock.json文件
2. 执行缓存清理命令：
```
npm cache clean --force
```
3. 重新安装所有依赖：
```
npm install
```
第四步：确认Bootstrap样式的引入配置
打开angular-cli.json（如果你的Angular CLI版本较新，可能是angular.json），在styles数组中确认已经正确引入Bootstrap的CSS文件：
```
"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]
```