ReferenceError: window is not defined in univrsal

[mohamedHassanee]

i followed this link https://trilon.io/blog/angular-universal-v9-whats-new#What-s-new-with-Angular-Universal- to apply ssr for my app i installed universal by ng add @nguniversal/express-engine@next then i used this command npm run dev:ssr after successful compilation i got the following error: `Compiled successfully. F:\Work\stc\GitHub\frontend\eforms-app\dist\eforms-app\server\main.js:273178 })(window, function(__WEBPACK_EXTERNAL_MODULE_knockout, WEBPACK_EXTERNAL_MODULE_survey_knockout__) { ^

ReferenceError: window is not defined at Object../node_modules/survey-creator/survey-creator.js (F:\Work\stc\GitHub\frontend\eforms-app\dist\eforms-app\server\main.js:273178:4) at webpack_require (F:\Work\stc\GitHub\frontend\eforms-app\dist\eforms-app\server\main.js:20:30) at Object../src/app/core/survey/surevey-settings/survey-settings.ts (F:\Work\stc\GitHub\frontend\eforms-app\dist\eforms-app\server\main.js:356044:23) at webpack_require (F:\Work\stc\GitHub\frontend\eforms-app\dist\eforms-app\server\main.js:20:30) at Object../src/app/pages/eforms/eforms.component.ts (F:\Work\stc\GitHub\frontend\eforms-app\dist\eforms-app\server\main.js:358302:24) at webpack_require (F:\Work\stc\GitHub\frontend\eforms-app\dist\eforms-app\server\main.js:20:30) at Object../src/app/app-routing.module.ts (F:\Work\stc\GitHub\frontend\eforms-app\dist\eforms-app\server\main.js:354661:28) at webpack_require (F:\Work\stc\GitHub\frontend\eforms-app\dist\eforms-app\server\main.js:20:30) at Object../src/app/app.module.ts (F:\Work\stc\GitHub\frontend\eforms-app\dist\eforms-app\server\main.js:354829:30) at __webpack_require__ (F:\Work\stc\GitHub\frontend\eforms-app\dist\eforms-app\server\main.js:20:30)

A server error has occurred. node exited with 1 code. connect ECONNREFUSED 127.0.0.1:52185 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! eforms-app@0.0.0 dev:ssr: ng run eforms-app:serve-ssr npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the eforms-app@0.0.0 dev:ssr script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\mohamed.mohamed\AppData\Roaming\npm-cache_logs\2020-07-13T05_59_03_484Z-debug.log`

after search i found that i should to put some code in server.ts like: `const domino = require("domino");

const win = domino.createWindow(indexHtml);

win.Object = Object;

win.Math = Math;

global["window"] = win;

global["document"] = win.document;

global["branch"] = null;

global["object"] = win.object;

global["HTMLElement"] = win.HTMLElement;

global["navigator"] = win.navigator;

global["localStorage"] = localStorage;

global["sessionStorage"] = localStorage;`

but still the error exists.

full server.ts code is : `

import 'zone.js/dist/zone-node';

import { ngExpressEngine } from '@nguniversal/express-engine';

import * as express from 'express';

import { join } from 'path';

import { AppServerModule } from './src/main.server'; import { APP_BASE_HREF } from '@angular/common'; import { existsSync,readFileSync } from 'fs'; const distFolder = join(process.cwd(), 'dist/eforms-app/browser'); const indexHtml = readFileSync(join(distFolder, 'index.html')).toString(); const domino = require("domino"); const win = domino.createWindow(indexHtml); win.Object = Object; win.Math = Math; global["window"] = win; global["document"] = win.document; global["branch"] = null; global["object"] = win.object; global["HTMLElement"] = win.HTMLElement; global["navigator"] = win.navigator; global["localStorage"] = localStorage; global["sessionStorage"] = localStorage;

// The Express app is exported so that it can be used by serverless Functions. export function app(): any { const server = express(); //const distFolder = join(process.cwd(), 'dist/eforms-app/browser'); //const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine) server.engine('html', ngExpressEngine({ bootstrap: AppServerModule }));

server.set('view engine', 'html'); server.set('views', distFolder);

// Example Express Rest API endpoints // server.get('/api/*', (req, res) => { }); // Serve static files from /browser server.get('.*', express.static(distFolder, { maxAge: '1y' }));

// All regular routes use the Universal engine server.get('*', (req, res) => { res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] }); });

return server; }

function run(): void { const port = process.env.PORT || 4000;

// Start up the Node server const server = app(); server.listen(port, () => { console.log(Node Express server listening on http://localhost:${port}); }); }

// Webpack will replace 'require' with '__webpack_require' // 'non_webpack_require' is a proxy to Node 'require' // The below code is to ensure that the server is run only when not requiring the bundle. declare const non_webpack_require: NodeRequire; const mainModule = non_webpack_require.main; const moduleFilename = mainModule && mainModule.filename || ''; if (moduleFilename === filename || moduleFilename.includes('iisnode')) { run(); }

export * from './src/main.server';

`

[alan-agius4]

Kindly see: https://github.com/angular/universal/blob/master/docs/gotchas.md

If the problem persists, kindly file a new issue with a minima reproduction.

Thanks

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}