Angular5 webpack ReferenceError: window is not defined

Question

I am facing windows not defined error while trying to configure my angluar2 application with angular-universal.

cli version is migrated from 1.7.4 -> 6.0.3

Below is the error i am getting.

E:\Personal\my_codes\dist\server.js:1721
 */},function(e,t,n){"use strict";n.r(t),n.d(t,"provideModuleMap",function(){return a}),n.d(t,"ModuleMapLoaderModule",function(){return s}),n.d(t,"MODULE_MAP",function(){return i}),n.d(t,"ModuleMapNgFactoryLoader",function(){return o});var r=n(0),i=new r.InjectionToken("MODULE_MAP"),o=function(){function e(e,t){this.compiler=e,this.moduleMap=t}return e.prototype.load=function(e){var t=this.compiler instanceof r.Compiler,n=this.moduleMap[e];if(!n)throw new Error(e+" did not exist in the MODULE_MAP");return t?this.loadFactory(n):this.loadAndCompile(n)},e.prototype.loadFactory=function(e){return new Promise(function(t){return t(e)})},e.prototype.loadAndCompile=function(e){return this.compiler.compileModuleAsync(e)},e.decorators=[{type:r.Injectable}],e.ctorParameters=function(){return[{type:r.Compiler},{type:void 0,decorators:[{type:r.Inject,args:[i]}]}]},e}();function a(e){return{provide:i,useValue:e}}var s=function(){function e(){}return e.withMap=functio

ReferenceError: window is not defined
    at Object.<anonymous> (E:\Personal\my_codes\dist\server.js:1721:1147)
    at n (E:\Personal\my_codes\dist\server.js:1:172)
    at Object.<anonymous> (E:\Personal\my_codes\dist\server.js:2001:2400)
    at n (E:\Personal\my_codes\dist\server.js:1:172)
    at E:\Personal\my_codes\dist\server.js:1:579
    at Object.<anonymous> (E:\Personal\my_codes\dist\server.js:1:590)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! col-ui@0.0.0 serve:ssr: `node dist/server.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the col-ui@0.0.0 serve:ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Any suggestion on how i can resolve this will be really helpful.

Answer 1

Try to use domino , that will support many inconsistency in Angular SSR.

In server.ts

const domino = require('domino');
const win = domino.createWindow(template);

global['window'] = win;
global['document'] = win.document;
global['navigator'] = win.navigator;
global['CSS'] = undefined;