angular5 - Server Side Rendering Angular 4/5 Issue

Question

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

Answer 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.