如何修复angular 6 universal server.js中的“ReferenceError：window is not defined”错误

Question

我在angular cli命令行工具上执行以下命令，为angular6'ng add @ 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! [email protected] serverrl `node local.js`
npm ERR! Exit status 1

作为一种解决方法，我用全局替换窗口。

var work = global.document.createElement（'div'）;但窗口，文档元素正在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和browser对象将永远是undefined并且没有等价物。

原因很简单，当在客户端运行Angular应用程序时，会提供（几乎）空的HTML文件，然后Javascript接管，并使用window，document等修改DOM。

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

因此，无论您尝试使用这些关键字实现什么，您都必须找到不同的服务器端呈现方式，或者只是有条件地禁用此代码，因此它只在客户端执行，并且不会在服务器端抛出错误。