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

问题描述

我正在处理 angular 5.我完成了我的应用程序并创建了一个构建并部署在服务器上，它运行良好.
但是我在搜索引擎优化方面遇到了问题，即页面未在 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屋！