Angular 5项目执行ng build --prod时Bootstrap报错求助

我之前也碰到过一模一样的情况——明明CLI和Bootstrap版本都达标，却还是弹出这个Unknown browser major错误。其实这大概率是Browserslist配置不兼容或者依赖包版本冲突导致的，下面给你几个亲测有效的解决步骤：

1. 检查并修正Browserslist配置 #

首先看项目根目录下有没有.browserslistrc文件，或者打开package.json看看有没有browserslist字段。Angular 5和Bootstrap 4.0.0需要的兼容浏览器配置应该是这样的：

如果是.browserslistrc文件，内容改成：

> 1%
last 2 versions
IE 11

如果是在package.json里，添加或修改成：

"browserslist": [
  "> 1%",
  "last 2 versions",
  "IE 11"
]

旧的配置可能包含了某些已被废弃的浏览器标识，或者写法不符合当前依赖的要求，调整后能解决大部分这类错误。

2. 清理依赖缓存并重装 #

有时候node_modules里的依赖包会有版本冲突，尤其是browserslist和postcss这类工具包。按以下步骤操作：

• 删除项目根目录的node_modules文件夹：
  Windows系统：rmdir /s /q node_modules
  Mac/Linux系统：rm -rf node_modules
• 删除package-lock.json文件：rm package-lock.json
• 重新安装依赖：npm install

3. 锁定Browserslist的兼容版本 #

如果重装后还是报错，可能是自动安装的browserslist版本太高，和Angular CLI 1.7.x不兼容。可以手动安装一个适配的版本：

npm install browserslist@4.6.6 --save-dev

这个版本和Angular CLI 1.7.3配合起来很稳定，不会出现浏览器标识识别错误。

4. 检查Angular CLI的样式配置 #

最后确认一下angular-cli.json（Angular 5用的是这个配置文件，不是后来的angular.json）里的styles数组是否正确引入了Bootstrap：

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.min.css",
  "styles.css"
]

虽然报错不是路径问题，但偶尔路径写错也会触发奇怪的模块构建错误，确认一下更稳妥。

按上面的步骤来，基本就能解决这个构建错误了。

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