Angular Universal与jQuery兼容问题：页面无法完整渲染

我之前踩过一模一样的坑！Angular Universal的服务端渲染（SSR）机制和jQuery的DOM依赖天生就有冲突，你遇到的页面渲染中断、ngFor无法正常工作的问题，本质上是因为jQuery在服务端执行时找不到浏览器特有的window、document对象，抛出的错误打断了整个SSR渲染流程。

下面是几个亲测有效的解决办法：

1. 仅在浏览器环境中加载并调用jQuery #

Angular提供了isPlatformBrowser工具函数，可以帮我们判断当前代码是运行在浏览器还是服务端，只有在浏览器环境下才初始化jQuery：

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

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

  ngOnInit(): void {
    // 只在浏览器端执行jQuery代码
    if (isPlatformBrowser(this.platformId)) {
      const $ = require('jquery');
      // 这里写你的jQuery操作，比如：
      // $('.menu-item').addClass('active');
    }
  }
}

2. 配置Angular构建，排除服务端的jQuery依赖 #

在angular.json的服务端构建配置里，把jQuery标记为外部依赖，避免服务端打包时将其纳入，从根源上阻止它在服务端执行：

"architect": {
  "server": {
    "builder": "@angular-devkit/build-angular:server",
    "options": {
      "outputPath": "dist/server",
      "main": "server.ts",
      "tsConfig": "tsconfig.server.json",
      "externalDependencies": ["jquery"]
    }
  }
}

3. 优先用Angular原生API替代jQuery #

其实大部分jQuery的常用功能，Angular都有原生的实现方案，完全不需要依赖jQuery，这也是最推荐的长期解决方案：

• 用ViewChild获取DOM元素
• 用Renderer2进行安全的DOM操作
• 用Angular的内置指令（如*ngIf、[ngClass]）替代jQuery的显示/隐藏、样式修改逻辑

举个替代jQuery隐藏元素的例子：

import { Component, OnInit, ViewChild, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-home',
  template: `<div #targetElement>需要操作的元素</div>`
})
export class HomeComponent implements OnInit {
  @ViewChild('targetElement') targetElement!: ElementRef;

  constructor(private renderer: Renderer2) {}

  ngOnInit(): void {
    // 用Renderer2修改元素样式，替代jQuery的 $('.target').hide()
    this.renderer.setStyle(this.targetElement.nativeElement, 'display', 'none');
  }
}

按照上面的方法调整后，你的HomeComponent应该就能正常加载，同时整个应用的SSR渲染也不会被打断了。

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