ReferenceError:窗口未定义,angular6通用

时间:2018-08-23 12:12:21

标签: angular webpack angular6 angular-universal

我有一个angular6通用应用程序,我正在为图像滑块集成 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)

3 个答案:

答案 0 :(得分:2)

使用NestJS,只需应用import Plot from 'react-plotly.js'即可,就像这样:

applyDomino

答案 1 :(得分:0)

“未定义窗口”来自访问窗口变量的第三方库。

您应使用浏览器检查条件包装代码

HTML:

<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是一个很好的用法示例。

答案 2 :(得分:0)

这也可以通过使用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上的问题和建议