Window is not defined after upgrading to angular 16

[ahmadallw]

After upgrading our angular universal app from angular 15 to angular 16 the following issue start to appears while trying to build the app

Error:

Prerendering 1 route(s) to C:\Users\user\Desktop\Repos\ta-web-app\dist\ta-web-app\browser...Unhandled Promise rejection: window is not defined ; Zone: <root> ; Task: Promise.then ; Value: ReferenceError: window is not defined
    at 46465 (C:\Users\user\Desktop\Repos\ta-web-app\dist\ta-web-app\server\main.js:1:4663650)
    at __webpack_require__ (C:\Users\user\Desktop\Repos\ta-web-app\dist\ta-web-app\server\main.js:1:12338594)
    at 43171 (C:\Users\user\Desktop\Repos\ta-web-app\dist\ta-web-app\server\main.js:1:9684220)
    at __webpack_require__ (C:\Users\user\Desktop\Repos\ta-web-app\dist\ta-web-app\server\main.js:1:12338594)
    at 82821 (C:\Users\user\Desktop\Repos\ta-web-app\dist\ta-web-app\server\main.js:1:981154)
    at __webpack_require__ (C:\Users\user\Desktop\Repos\ta-web-app\dist\ta-web-app\server\main.js:1:12338594)
    at 65200 (C:\Users\user\Desktop\Repos\ta-web-app\dist\ta-web-app\server\main.js:1:1547596)
    at __webpack_require__ (C:\Users\user\Desktop\Repos\ta-web-app\dist\ta-web-app\server\main.js:1:12338594)
    at 22824 (C:\Users\user\Desktop\Repos\ta-web-app\dist\ta-web-app\server\main.js:1:1855211)
    at __webpack_require__ (C:\Users\user\Desktop\Repos\ta-web-app\dist\ta-web-app\server\main.js:1:12338594) ReferenceError: window is not defined
    at 46465 (C:\Users\user\Desktop\Repos\ta-web-app\dist\ta-web-app\server\main.js:1:4663650)
    at __webpack_require__ (C:\Users\user\Desktop\Repos\ta-web-app\dist\ta-web-app\server\main.js:1:12338594)
    at 43171 (C:\Users\user\Desktop\Repos\ta-web-app\dist\ta-web-app\server\main.js:1:9684220)
    at __webpack_require__ (C:\Users\user\Desktop\Repos\ta-web-app\dist\ta-web-app\server\main.js:1:12338594)
    at 82821 (C:\Users\user\Desktop\Repos\ta-web-app\dist\ta-web-app\server\main.js:1:981154)
    at __webpack_require__ (C:\Users\user\Desktop\Repos\ta-web-app\dist\ta-web-app\server\main.js:1:12338594)
    at 65200 (C:\Users\user\Desktop\Repos\ta-web-app\dist\ta-web-app\server\main.js:1:1547596)
    at __webpack_require__ (C:\Users\user\Desktop\Repos\ta-web-app\dist\ta-web-app\server\main.js:1:12338594)
    at 22824 (C:\Users\user\Desktop\Repos\ta-web-app\dist\ta-web-app\server\main.js:1:1855211)
    at __webpack_require__ (C:\Users\user\Desktop\Repos\ta-web-app\dist\ta-web-app\server\main.js:1:12338594)
✖ Prerendering routes to C:\Users\user\Desktop\Repos\ta-web-app\dist\ta-web-app\browser failed.
window is not defined

Its working normally when running it locally

[alan-agius4]

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[ahmadallw]

@alan-agius4 I will share the server.ts file, hope this will help
`import 'zone.js/dist/zone-node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import * as compression from 'compression';
import * as cookieParser from 'cookie-parser';
import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';
import { appConfig } from './src/environments/environment';
import { enableProdMode } from '@angular/core';
import { createWindow } from 'domino';

console.log('appConfig.environment: ', appConfig.environment);
const distFolder = join(process.cwd(), 'dist/ta-web-app/browser');
const indexHtml = existsSync(join(distFolder, 'index.original.html'))
? 'index.original.html'
: 'index';

patchWindow(indexHtml);
enableProdMode();
export function app(): express.Express {
const server = express();

server.engine(
'html',
ngExpressEngine({
bootstrap: AppServerModule,
})
);

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

server.use(compression());

server.use(cookieParser());

server.get(
    '*.*',
    express.static(distFolder, {
        maxAge: '1y',
    })
);

server.get('*', (req, res) => {
  console.log('SSR for route', req.url);
    res.render(indexHtml, {
        req,
        providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }],
    });
});

return server;

}

function run(): void {
const port = process.env['PORT'] ?? 4200;

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

function patchWindow(_template: string): void {
const win = createWindow(_template);
(win as any).Object = Object;
(win as any).Math = Math;

(win as any).localStorage = {
    getItem: (): undefined => undefined,
    setItem: () => void 0,
};

(global as any).window = win;
(global as any).document = win.document;
(global as any).branch = null;
(global as any).object = (win as any).object;

(global as any).navigator = win.navigator;

(global as any)['Node'] = (win as any).Node;
(global as any)['Event'] = (win as any).Event;
(global as any)['KeyboardEvent'] = (win as any).Event;
(global as any)['MouseEvent'] = (win as any).Event;
(global as any)['Event']['prototype'] = (win as any).Event.prototype;
(global as any)['CSS'] = null;

(global as any)['Prism'] = null;
}

declare const non_webpack_require: NodeRequire;
const mainModule = non_webpack_require.main;
const moduleFilename = mainModule?.filename ?? '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
run();
}

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

[alan-agius4]

Hi @ahmadallw, we'd require a runnable reproduction as described above.

[alan-agius4]

Thanks for reporting this issue. However, you didn't provide sufficient information for us to understand and reproduce the problem. Please check out our submission guidelines to understand why we can't act on issues that are lacking important information.

If the problem persists, please file a new issue and ensure you provide all of the required information when filling out the issue template.

[angular-automatic-lock-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.}