Angular 9 和 s-s-r - 未定义窗口
Posted
技术标签:
【中文标题】Angular 9 和 s-s-r - 未定义窗口【英文标题】:Angular 9 and s-s-r - window is not defined 【发布时间】:2020-09-13 02:22:15 【问题描述】:我正在使用 Angular 9 和 s-s-r,但其中一个包出现错误。
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
有人知道解决这个问题的方法吗?
【问题讨论】:
你可以试试这样 const DragEvent = (window as any).DragEvent 您所拥有的不应导致该错误。哪个模块导致了问题?另外,只是检查一下,您是否确保添加多米诺骨牌后应用程序编译正确,并重新启动 node/pm2 进程?这有时发生在我身上,我没有调试最新版本的代码...... @David 我更新了模块并尝试重新启动进程,但仍然是同样的问题。 【参考方案1】:我升级到 Angular 10,我在服务器上的 ngx-chips 遇到了同样的问题。
我解决了这个问题如下: 我可能和很多人一样,在服务器上渲染时并不需要这个组件。 懒得创建一个单独的项目来排除这个模块。 所以我只是禁用了这个组件。
在模板中:
<div *ngIf="isBrowser()">
<tag-input [(ngModel)]=...
</tag-input>
</div>
在打字稿中:
isBrowser()
if (window)
return true;
return false;
【讨论】:
以上是关于Angular 9 和 s-s-r - 未定义窗口的主要内容,如果未能解决你的问题,请参考以下文章
Angular Universal 错误 ReferenceError:未定义 MouseEvent
未定义窗口 - react-draft-wysiwyg 与下一个 js (s-s-r) 一起使用
ERROR 错误:未捕获(承诺中):TypeError:i.BehaviorSubject 不是 Angular 10 s-s-r 中的构造函数