webpack 参考错误:窗口未定义,Angular 6通用

8iwquhpp  于 2023-02-19  发布在  Webpack
关注(0)|答案(3)|浏览(157)

我有一个angular 6通用应用程序,我正在为图像滑块集成ng-simple-slideshow,它构建成功,但在运行时:npm运行服务:SSR给出以下错误:请提出一些解决办法。谢谢

ReferenceError: window is not defined
at F:\new_trd_back_up\dist\server.js:247023:8032
at vt (F:\new_trd_back_up\dist\server.js:246852:163)
at Object.module.exports (F:\new_trd_back_up\dist\server.js:246852:177)
at __webpack_require__ (F:\new_trd_back_up\dist\server.js:20:30)
at Object.jspdf (F:\new_trd_back_up\dist\server.js:87271:18)
at __webpack_require__ (F:\new_trd_back_up\dist\server.js:59361:30)
at Object../src/app/presentation/presentation.component.ts (F:\new_trd_back_up\dist\server.js:81159:13)
at __webpack_require__ (F:\new_trd_back_up\dist\server.js:59361:30)
at Object../src/app/presentation/presentation.component.ngfactory.js (F:\new_trd_back_up\dist\server.js:81046:11)
at __webpack_require__ (F:\new_trd_back_up\dist\server.js:59361:30)
a64a0gku

a64a0gku1#

"未定义窗口"来自访问窗口变量的第三方库。
您应该使用浏览器检查条件 Package 代码

    • 超文本标记语言:**
<ng-container *ngIf="isBrowser">
    <!-- In my case, ngx-siema & ngx-slcik -->
    <ngx-siema></ngx-siema> 
</ng-container>
    • TS:**
import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';

isBrowser;

constructor(@Inject(PLATFORM_ID) private platformId) { 
   this.isBrowser = isPlatformBrowser(platformId);
}

if (this.isBrowser) { 
  // put your code which is access window variable 
}

here是一个很好的用法示例。

z5btuh9x

z5btuh9x2#

使用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(), 'dist/apps/browser');

applyDomino(global, join(BROWSER_DIR, 'index.html')); // Mock document, window etc.

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

**编辑:**从Angular 8升级到Angular 10后就停止工作了,这可以在#451的基础上实现,到目前为止,原始的domino必须以这样的形式使用(server.ts):

import { createWindow } from 'domino';
import { join } from 'path';
const indexHtml = join(
  process.cwd(),
  'dist/apps/browser/index2.html'
);
const win = createWindow(indexHtml);

// Polyfills
(global as any).window = win;
(global as any).document = win.document;
(global as any).navigator = win.navigator;

import { ApplicationModule } from './app.module'; // IMPORTANT: MUST be placed AFTER all the code above

更详细的答案#830(评论)。

mspsb9vt

mspsb9vt3#

编辑:这个答案和问题是错误的,从根,Angular 使用Domino这些天无论如何,你应该使用注入或警卫,为进一步解释,阅读手册。
这也可以通过使用多米诺骨牌来解决。
将此添加到“server.ts”:

const domino = require('domino');
const fs = require('fs');
const path = require('path');
const template = fs.readFileSync(path.join(__dirname, '.', 'dist', 'index.html')).toString();
const win = domino.createWindow(template);
global['window'] = win;
global['document'] = win.document;

Github的票务问题及建议

相关问题