Angular 9和SSR-未定义窗口

时间:2020-05-26 09:59:22

标签: node.js angular angular-universal angular9

我正在使用Angular 9和SSR,但出现了其中一个软件包的错误。

const DragEvevent = window.DragEvent

ReferenceError: window is not defined

ngx芯片软件包中

我们已经尝试将变量添加到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芯片软件包

更新

ngx芯片中存在的问题是以前发生的。

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

有人知道解决这个问题的方法吗?

1 个答案:

答案 0 :(得分:0)

我升级到Angular 10,并且服务器上的ngx芯片也遇到了同样的问题。

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

在模板中:

db.foo.update({},{$push: {"items": {$each: ["foo","bar"], $position: 1}}},{multi:true});

在打字稿中:

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