Angular集成Bootstrap报错：找不到jquery.min.js文件求助

咱们来看看你遇到的这个问题哈，错误提示很明确——系统找不到指定路径下的jquery.min.js文件，咱们一步步排查解决：

ENOENT: no such file or directory, open 'C:\Users\andrewkp\Documents\VSCode\Projects\node_modules\jquery\dist\jquery.min.js' Error: ENOENT: no such file or directory, open 'C:\Users\andrewkp\Documents\VSCode\Projects\node_modules\jquery\dist\jquery.min.js'

问题根源 #

从你提供的angular.json配置来看，主要有两个问题：

1. 路径配置错误：你在styles和scripts字段里用了../node_modules，但你的angular.json是放在项目根目录（也就是MyProjectName文件夹），而node_modules也在同一个根目录下，用../会让系统往上跳一级目录，自然找不到目标文件。
2. 可能缺少依赖包：如果还没安装jquery和popper.js（Bootstrap 4及以上版本必须依赖这两个库），那node_modules里本来就没有jquery文件夹，也会触发这个错误。

解决步骤 #

1. 先安装必要的依赖包（如果还没装的话） #

打开终端，切换到你的项目根目录（就是包含angular.json的那个文件夹），运行以下命令：

npm install jquery popper.js bootstrap --save

这个命令会把Bootstrap、jquery和popper.js都安装到项目的node_modules目录里，确保依赖齐全。

2. 修改angular.json中的路径配置 #

把所有../node_modules替换成./node_modules——因为angular.json和node_modules是同级目录，用./就能正确访问到。另外记得加上popper.js的引用，不然Bootstrap的一些JS组件（比如下拉菜单、模态框）会无法正常工作。

修改后的styles和scripts部分示例：

"styles": [
  "src/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"
]

3. 重启Angular开发服务器 #

修改完配置后，关掉当前运行的ng serve进程，重新执行ng serve，让新的配置生效。

这样操作下来，应该就能解决这个文件找不到的错误啦！

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