Angular 13项目npm安装jQuery后无法加载的问题求助

问题场景 #

在Angular 13项目中，因需引入基于jQuery开发的外部依赖，执行npm install jquery后，package.json已包含"jquery": "^3.5.1"，node_modules中也已下载jQuery包。但运行ng serve启动项目后，在Chrome控制台输入$().jquery验证时出现报错：

Uncaught TypeError: Cannot read properties of undefined (reading 'jquery') at :1:4

这说明jQuery未被全局加载，浏览器环境无法访问$或jQuery变量。

完整解决方案 #

1. 安装jQuery及TypeScript类型声明 #

为避免TypeScript编译报错，需同时安装jQuery本体和对应的类型定义包：

npm install jquery @types/jquery --save

2. 配置全局脚本加载 #

打开项目根目录的angular.json文件，找到architect > build > options > scripts数组，添加jQuery的本地文件路径：

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

若需要在测试环境也生效，同步更新architect > test > options > scripts数组。

3. 验证加载结果 #

重启项目：

ng serve

在Chrome开发者工具控制台输入$().jquery，若能正常返回jQuery版本号（如3.5.1），则表示加载成功。

问题更新反馈 #

将node_modules/jquery/dist/jquery.min.js添加到angular.json的scripts元素后，控制台执行$().jquery已可正常显示版本号，问题解决。

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