如何修复"ReferenceError:未定义窗口"?angular 6通用server.js中的错误 [英] How to fix "ReferenceError: window is not defined" error in angular 6 universal server.js

问题描述

我在angular cli命令行工具上执行以下命令，为angular6安装通用软件包'ng添加@ ng-toolkit/universal'.它安装得很好，在我执行npm run build:prod之后，它也运行得很好.现在终于我运行'npm run server'了.但是这没有给我启动网址就抛出了错误.

I execute the following command on angular cli command line tool, to install universal package for angular6 'ng add @ng-toolkit/universal'. It installed good,after that i execute npm run build:prod and it also runs very well. Now finally I run 'npm run server'.But this throws me error without giving me launching url.

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

here it is throwing error in server.js file , how to fix it.

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

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

as a workaround i replace window with global.

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

var work = global.document.createElement('div'); but window,document element is being used in many places of 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语法替换.

I expect window.document,window to be replaced by nodejs syntax for the above sample code.

推荐答案

在Angular Universal上运行应用程序时，文档，窗口和 navigator 对象将始终是 undefined ，并且没有等效对象.

When running your app on Angular Universal, the document, window and navigator objects will always be undefined and have no equivalent.

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

The reason is simple, when running an Angular app on client side, an (almost) empty HTML file is served, then the JavaScript takes over, and modifies the DOM by using window, document, etc.

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

When running an Angular app on server side, the execution context is totally different, Node.js has no knowledge of any browser, it just generates HTML as a full plain string without interpreting it at all. That's why those keywords can't be used in this context.

因此，无论您要使用这些关键字尝试实现什么，都必须找到一种用于服务器端呈现的其他方法，或者只是有条件地禁用此代码，因此它仅在客户端执行，并且不会引发错误在服务器端.

So whatever you are trying to achieve with those keywords, you'll have to find a different way for server-side rendering, or just conditionally disable this code, so it only executes on client side, and doesn't throw errors on server side.

这篇关于如何修复"ReferenceError:未定义窗口"?angular 6通用server.js中的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！