angular - 错误 ReferenceError:particleJS 未定义 ~ Angular Universal + Webpack

Question

在我的 Angular 组件中，有完美工作的particle.js，在客户端使用 .js 渲染时效果很好ng serve。但是，当将它与 Angular Universal for Server-Side Rendering (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 找到答案，并且未定义窗口

标签： angularwebpacknestjsangular-universalparticles

Answer 1

看看多米诺骨牌。在那里，您可以访问服务器上的 DOM。

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