错误 ReferenceError:particleJS 未定义 ~ Angular Universal + Webpack答案

【问题标题】：ERROR ReferenceError: particlesJS is not defined ~ Angular Universal + Webpack错误 ReferenceError:particleJS 未定义 ~ Angular Universal + Webpack
【发布时间】：2019-08-09 19:55:26
【问题描述】：

在我的 Angular 组件中，particles.js 运行良好，在客户端使用 ng serve 渲染时效果很好。但是，当将它与 Angular Universal 用于服务器端渲染 (SSR) 结合使用时，我收到错误 ERROR ReferenceError: particlesJS is not defined。我曾尝试使用 webpack 将其列入白名单，但没有成功，webpack 的代码如下：

config.externals = nodeExternals({
  // The whitelisted ones will be included in the bundle.
  whitelist: [/^ng-circle-progress/, /^ng2-tel-input/, /^particles.js/]
});

其他 2 个包的错误已经消失，但这个不希望消失。

我的后端使用NestJS，尝试applyDomino，但也没有用，代码如下：

import { AngularUniversalModule, applyDomino } from '@nestjs/ng-universal';
import { join } from 'path';
import { Module } from '@nestjs/common';

// Get working directory of client bundle.
const BROWSER_DIR = join(
  process.cwd(),
  'functions',
  'dist',
  'apps',
  'ditectrev-browser'
); // Use when testing locally without Firebase Cloud Functions solely on NestJS.
// const BROWSER_DIR = join(process.cwd(), 'dist/apps/ditectrev-browser'); // Use when deploying to & testing with Firebase Cloud Functions.

applyDomino(global, join(BROWSER_DIR, 'index.html'));

@Module({
  imports: [
    AngularUniversalModule.forRoot({
      bundle: require('./../functions/dist/apps/ditectrev-server/main'), // Bundle is created dynamically during build process.
      liveReload: true,
      viewsPath: BROWSER_DIR
    })
  ]
})
export class AppModule {}

有趣的是，即使我收到错误消息，页面也会在服务器端正确呈现！它确实不会中断。单独使用 Cloud Functions for Firebase（本地和部署）进行渲染时也会出现同样的错误。

注意：这个话题没有帮助找到我的问题particles.js and window is not defined的答案

【问题讨论】：

标签： angular webpack nestjs angular-universal particles

【解决方案1】：

看看domino。在那里您可以访问服务器上的 DOM。

Here 是 Angular SSR 和多米诺骨牌的示例。

【讨论】：

感谢您的评论，但您可以在代码中看到我正在使用名为 applyDomino 的 NestJS 实现。