Angular Universal SSR下particlesJS未定义错误求助（已尝试多方案）

我之前也踩过这个坑！particles.js本质是依赖浏览器环境的，单纯靠Webpack白名单或者applyDomino通常搞不定——因为它在服务端初始化阶段会直接访问window对象，而且加载时机的问题也会导致报错。下面是我亲测有效的解决方案：

核心思路：只在客户端环境初始化particles.js #

服务端渲染时没有浏览器的window和DOM环境，所以必须确保particles.js的加载和初始化逻辑只在浏览器端执行。Angular提供了isPlatformBrowser工具来判断当前环境，我们可以用它来包裹particles.js的代码。

步骤1：移除全局脚本引入（如果有的话） #

如果你之前在angular.json的scripts数组里全局引入了particles.js，先删掉这一行：

// angular.json 里要删掉的内容
"scripts": [
  "node_modules/particles.js/particles.js"
]

步骤2：在组件中按需加载并初始化 #

在使用particles的组件里，引入环境判断工具，然后在浏览器环境下动态加载particles.js：

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

@Component({
  selector: 'app-particles-container',
  template: '<div id="particles-js"></div>'
})
export class ParticlesContainerComponent implements OnInit {
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  ngOnInit(): void {
    // 仅在浏览器环境下执行
    if (isPlatformBrowser(this.platformId)) {
      // 动态导入particles.js并初始化
      import('particles.js').then(particlesModule => {
        particlesModule.particlesJS('particles-js', {
          // 这里放你的particles配置项
          particles: {
            number: { value: 80 },
            size: { value: 3 }
            // 其他配置...
          }
        });
      });
    }
  }
}

为什么之前的方案没用？ #

• Webpack白名单：它只是让particles.js被打包进服务端bundle，但服务端执行时particles.js会尝试访问window，依然会报错。
• applyDomino：它只能模拟基础的DOM环境，但particles.js还依赖浏览器特有的API（比如requestAnimationFrame），而且很多时候它的模块代码在加载阶段就会访问window，这时候模拟DOM也救不了。

额外优化：用第三方Angular封装库（可选） #

如果你不想自己写初始化逻辑，可以用专门为Angular适配的粒子库，比如ngx-particles，这类库已经处理了SSR的环境兼容问题，你只需要按照文档导入和配置即可，不用手动处理环境判断。

这样调整后，服务端渲染时不会执行particles.js的代码，也就不会报particlesJS is not defined的错误，同时客户端加载后会正常初始化粒子效果，页面渲染也不受影响。

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