时间戳

首页 > 解决方案 > Angular 9 和 SSR - 未定义窗口

node.js - Angular 9 和 SSR - 未定义窗口

问题描述

我正在使用 Angular 9 和 SSR，但其中一个包出现错误。

const DragEvevent = window.DragEvent

ReferenceError: window is not defined

在ngx-chips包上

我们已经尝试将变量添加到 nodeJs 中：

const domino = require('domino');
const fs = require('fs');
const template = fs.readFileSync(join(join(process.cwd(), 'dist/emaua-front/browser'), 'index.html')).toString();
console.log(template);
const win = domino.createWindow(template);

// mock
global['window'] = win;
global['document'] = win.document;
global['DOMTokenList'] = win.DOMTokenList;
global['Node'] = win.Node;
global['Text'] = win.Text;
global['HTMLElement'] = win.HTMLElement;
global['navigator'] = win.navigator;

但错误仍然存​​在。

更新 

After updating all packages I got the error: 
ERROR in multi ./src/assets/css/ripple.min.scss ./src/assets/css/lounge.scss ./src/assets/css/discovery.scss ./src/assets/css/main.scss ./src/styles.scss ./node_modules/roboto-fontface/css/roboto/roboto-fontface.css ./node_modules/material-design-icons/iconfont/material-icons.css ./node_modules/bootstrap/dist/css/bootstrap.min.css ./node_modules/bootstrap/dist/css/bootstrap-theme.min.css ./node_modules/ng-bootstrap-to-bootstrap-3/dist/ng-bootstrap-to-bootstrap-3.min.css ./node_modules/jquery-ui-dist/jquery-ui.min.css ./node_modules/jquery-ui-dist/jquery-ui.theme.min.css ./node_modules/ag-grid-community/dist/styles/ag-grid.css ./node_modules/ag-grid-community/dist/styles/ag-theme-balham.css ./node_modules/slick-carousel/slick/slick.scss ./node_modules/slick-carousel/slick/slick-theme.scss ./src/assets/css/animate.css ./node_modules/cookieconsent/build/cookieconsent.min.css
Module not found: Error: Can't resolve '/Users/vinh/learning/front-end/node_modules/bootstrap/dist/css/bootstrap-theme.min.css' in '/Users/vinh/learning/front-end'
this.debug is not a function

之后，我按照此处所述应用了修复程序

我又遇到了同样的错误，例如：

const DragEvent = window.DragEvent;
                  ^

ReferenceError: window is not defined

在ngx-chips包上

更新

我们在 ngx-chips 中遇到的问题是以前发生的。

https://github.com/Gbuomprisco/ngx-chips/issues/740 https://github.com/Gbuomprisco/ngx-chips/issues/786

有谁知道克服这个问题的方法？

标签： node.jsangularangular-universalangular9

解决方案

我升级到 Angular 10，我在服务器上遇到了同样的问题 ngx-chips。

我解决了这个问题如下：我可能和很多人一样，在服务器上渲染时并不需要这个组件。懒得创建一个单独的项目来排除这个模块。所以我只是禁用了这个组件。

在模板中：

<div *ngIf="isBrowser()">
   <tag-input [(ngModel)]=...  
   </tag-input>
</div>

在打字稿中：

isBrowser() {
  if (window) {
       return true;
  }
  return false;
}

推荐阅读