Gowri Shankar
Gowri Shankar

Reputation: 21

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 'node:path';

// 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

Upvotes: 0

Views: 38

Answers (0)

Related Questions