CODEWITHSUNDEEP
javascriptangularserver-side-renderingangular11
Hossein Sadeghi
Hossein Sadeghi

Reputation: 1

Angular 11 SSR serve problem with error window is not defined

when i tried to generate a build and serve SSR project with angular i got this error

C:\Projects\cloud_market_ssr\client\dist\market\server\main.js:72623

var requestFn = window.requestAnimationFrame||getPrefixed('RequestAnimationFrame') || timeoutDefer;

ReferenceError: window is not defined
at C:\Projects\cloud_market_ssr\client\dist\market\server\main.js:72623:19
at C:\Projects\cloud_market_ssr\client\dist\market\server\main.js:72404:11
at Object.4R65 (C:\Projects\cloud_market_ssr\client\dist\market\server\main.js:72406:2)
at __webpack_require__ (C:\Projects\cloud_market_ssr\client\dist\market\server\main.js:26:30)
at Module.ZeVW (C:\Projects\cloud_market_ssr\client\dist\market\server\main.js:223603:65)
at __webpack_require__ (C:\Projects\cloud_market_ssr\client\dist\market\server\main.js:26:30)
at Module.PCNd (C:\Projects\cloud_market_ssr\client\dist\market\server\main.js:178377:126)
at __webpack_require__ (C:\Projects\cloud_market_ssr\client\dist\market\server\main.js:26:30)
at Module.ZAI4 (C:\Projects\cloud_market_ssr\client\dist\market\server\main.js:221439:79)
at __webpack_require__ (C:\Projects\cloud_market_ssr\client\dist\market\server\main.js:26:30)

error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Process finished with exit code 1

this is the packages that i installed and they perfectly work

{
  "name": "market",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "dev:ssr": "ng run market:serve-ssr",
    "serve:ssr": "node dist/market/server/main.js",
    "build:ssr": "npm run build && ng run market:server:production",
    "full:ssr": "npm run build:ssr && npm run dev:ssr && npm run serve:ssr",
    "prerender": "ng run market:prerender"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^11.2.13",
    "@angular/cdk": "^11.2.12",
    "@angular/common": "^11.2.13",
    "@angular/compiler": "^11.2.13",
    "@angular/core": "^11.2.13",
    "@angular/flex-layout": "^11.0.0-beta.33",
    "@angular/forms": "^11.2.13",
    "@angular/material": "^11.2.12",
    "@angular/platform-browser": "^11.2.13",
    "@angular/platform-browser-dynamic": "^11.2.13",
    "@angular/platform-server": "^11.2.13",
    "@angular/pwa": "^0.1102.12",
    "@angular/router": "^11.2.13",
    "@angular/service-worker": "^11.2.13",
    "@nguniversal/express-engine": "^11.2.1",
    "@nicky-lenaers/ngx-scroll-to": "^9.0.0",
    "core-js": "^2.5.4",
    "cors": "^2.8.5",
    "domino": "^2.1.6",
    "echarts": "^4.2.0-rc.2",
    "echarts-gl": "^1.1.1",
    "edit-json-file": "^1.6.0",
    "express": "^4.15.2",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "jalali-moment": "^3.2.1",
    "jquery": "^3.4.1",
    "leaflet": "^1.7.1",
    "leaflet-arc": "^1.0.2",
    "localforage": "^1.5.0",
    "localstorage-polyfill": "^1.0.1",
    "mock-browser": "^0.92.14",
    "moment-jalaali": "~0.9.2",
    "ngforage": "^6.0.0",
    "ngx-image-compress": "^11.0.3",
    "ngx-image-zoom": "^0.6.0",
    "ngx-owl-carousel-o": "^5.0.0",
    "ngx-pagination": "^5.1.0",
    "ngx-slick-carousel": "~0.5.1",
    "rxjs": "^6.5.3",
    "sass": "^1.32.6",
    "slick-carousel": "~1.8.1",
    "webpack-node-externals": "^3.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1002.0",
    "@angular/cli": "^11.2.12",
    "@angular/compiler-cli": "^11.2.13",
    "@angular/language-service": "^11.2.13",
    "@nguniversal/builders": "^10.1.0",
    "@types/express": "^4.17.0",
    "@types/jasmine": "~3.7.2",
    "@types/jasminewd2": "~2.0.9",
    "@types/node": "~14.14.44",
    "codelyzer": "~6.0.2",
    "eslint": "~7.26.0",
    "jasmine-core": "~3.7.1",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~4.0.1",
    "karma-jasmine-html-reporter": "^1.6.0",
    "protractor": "^7.0.0",
    "ts-node": "~9.1.1",
    "typescript": "~4.0.6"
  }
}

and this is my server.ts

import 'zone.js/dist/zone-node';
import * as express from 'express';

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

///Handle Error local storage & document & window not defined
const MockBrowser = require('mock-browser').mocks.MockBrowser;
const mock = new MockBrowser();

const cors = require('cors');
const exp = require('express');

const application = exp();application.use(cors());

const domino = require("domino");
const fs = require("fs");
const path = require("path");
const templateA = fs
  .readFileSync(path.join("dist/browser", "index.html"))
  .toString();
const win = domino.createWindow(templateA);
win.Object = Object;
win.Math = Math;


import 'localstorage-polyfill';
global['localStorage'] = localStorage;


global["window"] =  mock.getWindow();
global["document"] = mock.getDocument();
global["branch"] = null;
global["object"] = win.object;
global['navigator'] = mock.getNavigator();

Object.defineProperty(document.body.style, 'transform', {
  value: () => {
    return {
      enumerable: true,
      configurable: true
    };
  },
});

//////////////////////////////////////

import { APP_BASE_HREF } from '@angular/common';
import { AppServerModule } from './src/main.server';
import { existsSync } from 'fs';

// 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/client/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 || 5050;

  // 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();
}
const nodeExternals = require('webpack-node-externals');

module.exports = {
  externals: [nodeExternals()],
  // etc configs here
}

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

Upvotes: 0

Views: 2864

Answers (1)

Caio Oliveira
Caio Oliveira

Reputation: 804

You are probably using some library or component in which needs the window to be rendered, as example, a chart.

Go over your code base and see if anything could be using the window and that doesnt need to be rendered server side.

Once you find it, use the platform id injector from angular to check wheter you are on the browser or the server, if it is on server do not render said component.

Upvotes: 1

Related Questions