Question

在我的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/]
});

其他两个软件包中的错误消失了，但是这个软件包不想消失。

使用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 {}

有趣的是，即使遇到错误，页面也可以在服务器端正确显示！它不会不中断。单独使用Firebase和Cloud Functions for Firebase（本地和部署）进行渲染时，会发生相同的错误。

注意：本主题无助于我的问题particles.js and window is not defined

的答案。

Answer 1

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

Here是Angular SSR和多米诺骨牌的一个例子。

错误ReferenceError：未定义particlesJS〜Angular Universal + Webpack

1 个答案: