服务器端渲染Angular 4/5问题 [英] Server Side Rendering Angular 4/5 Issue

问题描述

我正在使用angular5.我已经完成了我的应用程序，创建了一个构建并部署在服务器上，并且工作正常.
但是我对搜索引擎优化存在问题，即网页未在Google中建立索引.我使用了服务器端渲染，但出现以下错误:

I am working on angular 5. I am done with my app and created a build and deployed on the server and it works fine.
But I have issue with Search Engine Optimization that pages are not indexed in google. I used Server Side Rendering and have the below error:

F:\universal-demo-v5>node dist/server.js F:\universal-demo-v5\dist\server.js:111436 })(window, document, 'Hammer');    ^ ReferenceError: window is not defined
    at Object.defineProperty.value (F:\universal-demo-v5\dist\server.js:111436:4)
    at __webpack_require__ (F:\universal-demo-v5\dist\server.js:20:30)
    at Object.hammerjs (F:\universal-demo-v5\dist\server.js:139493:18)
    at __webpack_require__ (F:\universal-demo-v5\dist\server.js:128177:30)
    at Object.../../../../ngx-carousel/src/ngx-carousel/ngx-carousel.component.js (F:\universal-demo-v5\dist\server.js:138668:67)
    at __webpack_require__ (F:\universal-demo-v5\dist\server.js:128177:30)
    at Object.../../../../ngx-carousel/src/ngx-carousel/ngx-carousel.component.ngfactory.js (F:\universal-demo-v5\dist\server.js:139254:10)
    at __webpack_require__ (F:\universal-demo-v5\dist\server.js:128177:30)
    at Object.../../../../../src/app/components/home/home.component.ngfactory.js (F:\universal-demo-v5\dist\server.js:129216:11)
    at __webpack_require__ (F:\universal-demo-v5\dist\server.js:128177:30)

推荐答案

这已经很晚了，但也许会对您或将来的某个人有所帮助. 使用Angular Universal时会发生这种情况，这是因为服务器端渲染没有窗口"，只有浏览器有.

This is very late but maybe it will help you or someone in the future. This happens when using Angular Universal, its because the server side rendering doesnt have a 'window' to use, only the browser does.

因此，执行此代码时，服务器无法找到不存在的窗口.您可以通过删除Hammerjs来解决此问题(这不是必不可少的，只是增加了材质2和类似UI的生活质量)

So when this code is executed the server fails to find the non-existent window. You can fix this by either removing hammerjs (it isnt essential, just adds quality of life to material 2 and similar UI)

或者您可以在这里尝试此修复程序: https://github.com/angular/universal/issues/830

Or you can try this fix here: https://github.com/angular/universal/issues/830

其中涉及在server.ts代码中定义窗口，以便它在运行时可以正常工作.

Which involves defining the window in your server.ts code so when it runs it works correctly.

这篇关于服务器端渲染Angular 4/5问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！