javascript - 如何修复 angular 6 universal server.js 中的 "ReferenceError: window is not defined"错误

Question

我在 angular cli 命令行工具上执行以下命令，为angular6安装通用包'ng 添加@ng-toolkit/universal'。它安装得很好，之后我执行 npm run build:prod 并且它也运行得很好。现在我终于运行了“npm run server”。但这会抛出错误而没有给我启动 url。

这是在 server.js 文件中抛出错误，如何修复它。

ReferenceError: window is not defined
    at Object.exports.__esModule (D:\ANGULAR2\dist\server.js:122614:14)
    at __webpack_require__ (D:\ANGULAR2\dist\server.js:122314:31)
    at Object.exports.__esModule (D:\ANGULAR2\dist\server.js:122359:19)
    at __webpack_require__ (D:\ANGULAR2\dist\server.js:122314:31)
    at Object.exports.__esModule (D:\ANGULAR2\dist\server.js:122343:21)
    at __webpack_require__ (D:\ANGULAR2\dist\server.js:122314:31)
    at D:\ANGULAR2\dist\server.js:122334:19
    at D:\ANGULAR2\dist\server.js:122337:11
    at webpackUniversalModuleDefinition (D:\ANGULAR2\dist\server.js:122292:21)
    at Object.exports.__esModule (D:\ANGULAR2\dist\server.js:122294:4)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! rssmtechwood@0.0.0 serverrl `node local.js`
npm ERR! Exit status 1

作为解决方法，我将窗口替换为全局。

var work = global.document.createElement('div');但是window,document元素在server.js的很多地方都在使用

function(module, exports)

{   

        'use strict';   

        exports.__esModule = true;

        var tagSoup = false;

        var selfClose = false;  

        var work = window.document.createElement('div');

}


function isBrowser() 

{

    return (typeof window !== 'undefined' && typeof window.document !== 'undefined');

}

对于上述示例代码，我希望 window.document,window 被 nodejs 语法替换。

Answer 1

在 Angular Universal 上运行您的应用时，document、window 和 navigator 对象将始终为 undefined并且没有等价物。

原因很简单，当在客户端运行 Angular 应用程序时，会提供一个(几乎)空的 HTML 文件，然后 JavaScript 接管，并使用 window 修改 DOM，文档等

在服务器端运行 Angular 应用程序时，执行上下文完全不同，Node.js 不了解任何浏览器，它只是将 HTML 生成为完整的纯字符串，根本不解释它。这就是为什么不能在此上下文中使用这些关键字的原因。

所以无论你想用这些关键字实现什么，你都必须找到一种不同的服务器端渲染方式，或者只是有条件地禁用这段代码，这样它只在客户端执行，不会抛出错误在服务器端。