Angular项目报错Uncaught ReferenceError: jQuery is not defined求助

针对你遇到的Uncaught ReferenceError: jQuery is not defined错误，即便已经优先加载jQuery仍出现问题，可尝试以下几种排查和解决方式：

• 检查Angular配置中的脚本加载顺序
  在angular.json的build -> options -> scripts数组中，确保jQuery的路径排在所有依赖它的JS文件之前，示例配置：

  "scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "./assets/js/依赖jQuery的脚本1.js",
    "./assets/js/依赖jQuery的脚本2.js"
  ]
  

  注意确认jQuery的文件路径是否正确，避免因路径错误导致脚本未加载。

• 确保在DOM就绪后使用jQuery
  即便全局加载了jQuery，若在组件初始化的早期（比如constructor或ngOnInit）就调用jQuery，可能因DOM未完全就绪或脚本加载时序问题报错。可尝试将jQuery相关代码移至ngAfterViewInit生命周期钩子中：

  import { Component, AfterViewInit } from '@angular/core';
  
  declare var $: any;
  
  @Component({
    selector: 'app-your-component',
    templateUrl: './your-component.component.html'
  })
  export class YourComponentComponent implements AfterViewInit {
    ngAfterViewInit(): void {
      // 这里写jQuery相关代码
      $('#your-element').doSomething();
    }
  }
  

• 配置TypeScript类型声明
  若通过import方式引入jQuery，需先安装类型声明文件：

  npm install @types/jquery --save-dev
  

  之后在组件中正常导入并使用：

  import * as $ from 'jquery';
  
  // 后续即可直接使用$
  

  若依赖全局的jQuery，也可在组件顶部添加声明：declare var $: any;，避免TypeScript报错。

• 验证jQuery是否成功加载
  打开浏览器开发者工具的「Network」标签，刷新页面后搜索jquery，确认对应的JS文件返回状态为200，且文件内容正常。若文件未加载或返回404，说明路径配置有误，需修正路径。

• 排查第三方库的依赖配置
  部分依赖jQuery的第三方库，可能需要额外配置才能识别全局的jQuery对象。比如部分插件需要在加载前确保window.jQuery已存在，可检查第三方库的文档，确认是否有特殊的初始化要求。

内容的提问来源于stack exchange，提问作者Niccolò Bertozzi