Angular 4引入第三方模块时出现Webpack构建错误

我之前在Angular 4项目里集成Bootstrap时也踩过一模一样的坑，大概率是路径配置或者依赖安装的问题，给你几个排查和解决的实用步骤：

1. 确认依赖是否完整安装 #

Bootstrap 4依赖jQuery和popper.js，先确保你已经把这三个包都正确安装了，执行以下命令：

npm install bootstrap jquery popper.js --save

别只装Bootstrap，缺了另外两个不仅会编译报错，运行时也会出问题。

2. 修正angular-cli.json里的路径配置 #

你当前配置里用的../node_modules/是错误的！因为angular-cli.json本身就在项目根目录，node_modules也在根目录，相对路径应该用./（或者直接写node_modules/...也可以）。正确的配置应该是：

"styles": [
  "styles.css",
  "./node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"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"
]

用../会让Webpack去根目录的上一级找node_modules，自然找不到，这是这类编译报错最常见的原因。

3. 重启Angular CLI服务 #

修改完angular-cli.json之后，一定要重启ng serve或者ng build命令——CLI不会自动监听这个配置文件的变化，不重启的话修改根本不会生效。

4. 排查其他可能的问题 #

如果还是报错，建议把完整的错误信息贴出来，但根据你目前的描述，90%是路径的问题。另外也可以检查：

• styles.css里有没有引入Bootstrap的其他样式，会不会和全局样式冲突
• 确认Angular CLI版本和Bootstrap版本兼容（Angular 4搭配Bootstrap 4完全没问题，别用Bootstrap 5，那时候还没发布）

按照上面的步骤来，应该就能解决你的编译错误了！

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