Angular项目本地jQuery文件通过<script>标签加载失败求助

问题原因 #

你把jQuery文件直接放在index.html同目录，Angular开发服务器不会将该目录下的自定义文件标记为可访问的静态资源，浏览器出于安全策略会阻止加载本地资源，导致出现Not allowed to load local resource错误，进而jQuery无法初始化，控制台报错Uncaught TypeError: Cannot read properties of undefined (reading 'jquery')。

快速修复步骤 #

1. 移动jQuery文件：将下载的jquery-3.5.1.min.js放到Angular项目的src/assets目录下（默认项目已存在该目录，不存在则手动创建）。
2. 修改引用路径：在index.html中把script标签改成：

   <script src="assets/jquery-3.5.1.min.js"></script>
   

3. 验证效果：重启Angular开发服务器（ng serve），在Chrome控制台输入$().jquery，此时应该能返回3.5.1版本号，说明加载成功。

更规范的集成方式（推荐） #

如果想避免手动管理静态资源，可通过npm集成：

• 安装jQuery：

  npm install jquery --save
  

• 打开angular.json，在build -> options -> scripts数组中添加jQuery路径：

  "scripts": ["node_modules/jquery/dist/jquery.min.js"]
  

• 保存后重启开发服务器，无需在index.html中添加script标签，Angular会自动处理资源加载，开发和生产环境均能正常使用。

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