在Angular Universal中使用jQuery出现ReferenceError: $ is not defined错误

问题原因 #

Angular Universal 运行在 Node.js 服务端环境时，angular.json 中配置的脚本仅会在浏览器端加载，服务端无法访问这些前端资源，因此抛出 ReferenceError: $ is not defined 错误。

解决方案 #

1. 安装 jQuery 及类型定义包 #

放弃本地脚本引用，改用 npm 包管理，确保服务端能识别 jQuery：

npm install jquery @types/jquery --save

2. 在服务端全局注入 jQuery #

修改项目根目录下的 server.ts 文件，添加全局变量声明，让 Node.js 环境能识别 $ 和 jQuery：

import * as jquery from 'jquery';
// 注入全局变量
global['$'] = jquery;
global['jQuery'] = jquery;

3. 移除 angular.json 中的本地脚本引用 #

删除 scripts 数组内的 jQuery 相关本地文件路径：

// 移除这两行
"src/assets/js/jquery-3.6.0.min.js",
"src/assets/js/jquery-ui.js"

4. 兼容 jQuery UI 的服务端渲染 #

jQuery UI 依赖浏览器 DOM API，服务端渲染时直接执行会报错，需限定在浏览器环境下初始化相关逻辑：

import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

declare var $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  ngOnInit(): void {
    // 仅在浏览器环境下执行 jQuery UI 相关代码
    if (isPlatformBrowser(this.platformId)) {
      $( "#datepicker" ).datepicker();
      // 其他 jQuery UI 初始化逻辑
    }
  }
}

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