Angular 17 ssr throws error from node_modules

i'm not able to build my app due to this error while doing dev:ssr

./node_modules/@angular/cdk/fesm2022/platform.mjs:151 window.addEventListener('test', null, Object.defineProperty({}, 'passive', { ^ TypeError: window.addEventListener is not a function at supportsPassiveEventListeners (./node_modules/@angular/cdk/fesm2022/platform.mjs:151:20) at normalizePassiveListenerOptions (./node_modules/@angular/cdk/fesm2022/platform.mjs:168:12) at Module.1829 (./node_modules/@angular/cdk/fesm2022/a11y.mjs:1515:69) at __webpack_require__ (./webpack/bootstrap:19:1) at Module.9903 (./node_modules/@angular/material/fesm2022/chips.mjs:2198:1) at __webpack_require__ (./webpack/bootstrap:19:1) at Module.9184 (./node_modules/@angular/material/fesm2022/button.mjs:529:1) at __webpack_require__ (./webpack/bootstrap:19:1) at Object.9677 (./src/app/auth/pages/privacypolicy/privacypolicy.component.ts:5:1) at __webpack_require__ (./webpack/bootstrap:19:1) Node.js v20.18.1 A server error has occurred. node exited with 1 code.


i tried several adjustments but it throws error everytime related to dom elements from server.ts

here is my server.ts

// Load polyfills first
import 'core-js/stable';
import 'regenerator-runtime/runtime';



// Load Angular-specific polyfills
import 'zone.js/node';
import 'reflect-metadata';

// Angular imports
import { APP_BASE_HREF } from '@angular/common';
import { CommonEngine } from '@angular/ssr';

// Third-party imports
import express, { Request, Response, NextFunction } from 'express';

// Node.js built-in imports
import { existsSync } from 'node:fs';
import { join } from 'nodeath';

// Local imports
import AppServerModule from './src/main.server';
import { REQUEST, RESPONSE } from './express.tokens';
import { UrlConfigService } from './src/app/shared/services/url-config.service';
import {createWindow} from 'domino';

// Create URL config service instance
const urlConfig = new UrlConfigService();

// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
const server = express();
const distFolder = join(process.cwd(), 'dist/kaamresume/browser');
const indexHtml = existsSync(join(distFolder, 'index.original.html'))
? join(distFolder, 'index.original.html')
: join(distFolder, 'index.html');
const window = createWindow(indexHtml);
global['window'] = window as Window & typeof globalThis;
global['document'] = window.document;
global['navigator'] = window.navigator;

// Mock event listeners for SSR
global['window'].addEventListener = function(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void {};
global['window'].removeEventListener = function(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void {};
const commonEngine = new CommonEngine();

// CORS configuration using URL config service
server.use((req, res, next) => {
const allowedOrigins = urlConfig.getAllowedOrigins();
const origin = req.headers.origin;

if (origin && allowedOrigins.includes(origin)) {
res.header('Access-Control-Allow-Origin', origin);
}

res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
res.header('Access-Control-Allow-Methods', 'OPTIONS, GET, POST, PUT, PATCH, DELETE');

if (req.method === 'OPTIONS') {
res.sendStatus(200);
} else {
next();
}
});

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

// Serve static files from /browser
server.get('*.*', express.static(distFolder, {
maxAge: '1y',
index: false,
immutable: true,
cacheControl: true,
}));
server.get('*', (req: Request, res: Response, next: NextFunction) => {
// Get the location configuration
const locationConfig = urlConfig.getLocationConfig();
const { originalUrl, baseUrl } = req;

// Construct the full URL for SSR
const url = urlConfig.getFullUrl(originalUrl);

// Update window location with the current request
const windowLocation = {
...locationConfig,
pathname: originalUrl,
href: url
};

commonEngine
.render({
bootstrap: AppServerModule,
documentFilePath: indexHtml,
url,
publicPath: distFolder,
providers: [
{ provide: APP_BASE_HREF, useValue: baseUrl },
{ provide: REQUEST, useValue: req },
{ provide: RESPONSE, useValue: res },
]
})
.then((html) => {
// Set cache headers based on environment
if (urlConfig.isProduction()) {
res.setHeader('Cache-Control', 'public, max-age=3600');
} else {
res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
}
res.send(html);
})
.catch((err) => {
console.error('Error during SSR:', err);
next(err);
});
// }).catch((err) => {
// console.error('Error during SSR:', err);
// next(err);
// });


});
return server;
}

function run(): void {
const port = process.env['PORT'] || 4000;
const baseUrl = urlConfig.getBaseUrl();

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

// 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 default AppServerModule;


my tsconfig.json

{
"compileOnSave": false,
"compilerOptions": {
"esModuleInterop": true,
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"checkJs": true,
"allowJs": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "ES2022",
"module": "commonjs", // or commonjs if you prefer
"useDefineForClassFields": false,
"lib": [
"ES2022", "dom"
],

"types": [
"@stripe/stripe-js",
"@types/jquery",
"node"
]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
},
"typeRoots": [
"src/typings",
"node_modules/@types",
"node_modules/@angular",
"node_modules/@angular/material"
],
"include": [
"src/**/*.ts",
"express.tokens.ts",
"server.ts",
"src/main.server.ts"
]
}


my privacypolicy component

import { DOCUMENT, isPlatformBrowser } from '@angular/common';
import { Component, Inject, PLATFORM_ID, Renderer2 } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
selector: 'app-privacypolicy',
templateUrl: './privacypolicy.component.html',
styleUrl: './privacypolicy.component.scss'
})
export class PrivacypolicyComponent {
constructor(
private renderer: Renderer2,
@Inject(DOCUMENT) private document: Document,
@Inject(PLATFORM_ID) private platformId: Object,
// public dialogRef: MatDialogRef<PrivacypolicyComponent>,
){
if (isPlatformBrowser(this.platformId)) {
}
}
return(url: string) {
if (isPlatformBrowser(this.platformId)) {
// const newTab = this.renderer.createElement('a');
// this.renderer.setAttribute(newTab, 'href', url);
// this.renderer.setAttribute(newTab, 'target', '_self');
// newTab.click();
window.location.href=url;
}
}
}


couldn't comphrehend or troubleshoot these window based errors seems like my app is broke can any experts here point what the problem is

Continue reading...