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

Question

我正在使用 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

之后，我应用了 here 中所述的修复程序

我又遇到了同样的错误:

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

有谁知道解决这个问题的方法吗？

Answer 1

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

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

在模板中:

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

在 typescript 中:

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