Angular14项目引入外部JS时$未定义，如何正确定义$？

方案一：全局引入jQuery（适合需全局使用的场景） #

1. 安装jQuery及类型定义
   打开终端执行命令：

   npm install jquery --save
   npm install @types/jquery --save-dev
   

2. 在angular.json中配置全局脚本
   找到projects -> [你的项目名] -> architect -> build -> options -> scripts数组，添加jQuery的本地路径：

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

   配置完成后重启Angular开发服务器，外部JS文件中的$即可正常识别。

方案二：局部引入jQuery（仅在特定文件中使用） #

如果不需要全局生效，可在目标文件中单独导入：

• 在组件的.ts文件里：

  import * as $ from 'jquery';
  

• 若为自定义外部JS文件，将其改为ES模块格式，添加导入语句：

  import * as $ from 'jquery';
  
  // 你的事件代码：$('.class').click(function() { ... })
  

额外提示 #

Angular官方更推荐使用原生DOM操作或框架内置的事件绑定（比如模板中的(click)指令、@HostListener装饰器），尽量避免直接依赖jQuery。因为jQuery直接操作DOM可能会绕过Angular的变更检测机制，引发视图更新异常。

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