错误 引用错误:粒子JS未定义~角度通用+Webpack



在我的 Angular 组件中具有完美工作的粒子.js,在使用ng serve在客户端渲染时效果很好。但是,当将其与用于服务器端渲染 (SSR( 的 Angular Universal 结合使用时,我收到错误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 {}

有趣的是,即使我收到错误,页面也会在服务器端正确呈现!它不会破裂。仅使用 Firebase 的 Cloud Functions (本地和部署(进行渲染时,也会发生相同的错误。

注意:本主题无助于找到我的问题粒子的答案.js并且未定义窗口

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

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

最新更新