-->

Server Side Rendering Angular 4/5 Issue

2019-09-20 19:37发布

问题:

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)

回答1:

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.

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)

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

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



标签: angular5 ssr