ReferenceError: Zone is not defined

Question

I want to enable server side rendering on my Angular project(Angular 8) with Angular Universal. When I run the following command, It will create 2 folders in dist folder named server and browser and another file named server.js

npm run build:ssr

and then run the following command

npm run serve:ssr

I get the following error:

Zone.__load_patch('ZoneAwarePromise', function (global, Zone, api) { ^ ReferenceError: Zone is not defined

NOTE:

The first time that I run the command (npm run serve:ssr) I got the following error

var DragEvent = window.DragEvent;
^
ReferenceError: window is not defined

It fixed by adding the code below in the start of server.js file in dist folder

const domino = require('domino');
const fs = require('fs');
const path = require('path');
const template = fs.readFileSync(path.join(__dirname, '.','browser', 
'index.html')).toString();
const win = domino.createWindow(template);
global['window'] = win;
global['document'] = win.document;

and here is my package.json

   {
 "name": "start-ng",
 "version": "2.2.0",
 "license": "MIT",
 "scripts": {
   "ng": "ng",
   "start": "ng serve",
   "build": "ng build",
   "test": "ng test",
   "lint": "ng lint",
   "develop": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng  build --prod",
   "prod": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng  build --prod --configuration=production",
   "stage": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng  build --prod --configuration=staging",
   "e2e": "ng e2e",
   "compile:server": "webpack --config webpack.server.config.js --progress --colors",
   "serve:ssr": "node dist/server",
   "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
   "build:client-and-server-bundles": "ng build --prod && ng run ang-uni:server:production"
 },
 "private": true,
 "dependencies": {
   "@agm/core": "^1.0.0-beta.6",
   "@angular/animations": "^8.0.2",
   "@angular/common": "^8.0.2",
   "@angular/compiler": "^8.0.2",
   "@angular/core": "^8.0.2",
   "@angular/forms": "^8.0.2",
   "@angular/platform-browser": "^8.0.2",
   "@angular/platform-browser-dynamic": "^8.0.2",
   "@angular/platform-server": "^8.0.2",
   "@angular/router": "^8.0.2",
   "@aspnet/signalr": "^1.1.4",
   "@nguniversal/express-engine": "^7.1.1",
   "@nguniversal/module-map-ngfactory-loader": "7.1.1",
   "@ngx-progressbar/core": "^5.3.2",
   "@ngx-progressbar/http": "^5.3.2",
   "@ngx-progressbar/router": "^5.3.2",
   "@progress/kendo-angular-buttons": "^4.4.2",
   "@progress/kendo-angular-dateinputs": "3.7.4",
   "@progress/kendo-angular-dropdowns": "^3.5.6",
   "@progress/kendo-angular-excel-export": "2.4.0",
   "@progress/kendo-angular-grid": "^3.14.4",
   "@progress/kendo-angular-inputs": "5.2.2",
   "@progress/kendo-angular-intl": "^1.7.1",
   "@progress/kendo-angular-l10n": "^1.4.1",
   "@progress/kendo-angular-popup": "^2.6.0",
   "@progress/kendo-angular-upload": "^4.3.2",
   "@progress/kendo-data-query": "^1.5.1",
   "@progress/kendo-drawing": "^1.5.12",
   "@progress/kendo-theme-default": "latest",
   "@swimlane/ngx-charts": "^12.0.1",
   "agm-direction": "^0.7.8",
   "angular-l10n": "^8.0.0",
   "angular2-text-mask": "^9.0.0",
   "bootstrap": "^4.3.1",
   "classlist.js": "^1.1.20150312",
   "core-js": "^2.5.7",
   "domino": "^2.1.3",
   "express": "^4.17.1",
   "file-saver": "^2.0.2",
   "font-awesome": "^4.7.0",
   "intl": "1.2.5",
   "jquery": "3.4.1",
   "jwt-decode": "^2.2.0",
   "moment": "^2.24.0",
   "ng-block-ui": "^2.1.5",
   "ng-circle-progress": "^1.4.1",
   "ng2-ckeditor": "^1.2.3",
   "ngx-bar-rating": "^1.1.0",
   "ngx-bootstrap": "^4.3.0",
   "ngx-captcha": "^7.0.0",
   "ngx-chips": "^2.0.2",
   "ngx-infinite-scroll": "^7.2.0",
   "ngx-perfect-scrollbar": "8.0.0",
   "ngx-toastr": "^10.0.4",
   "popper.js": "1.15.0",
   "reflect-metadata": "^0.1.13",
   "rxjs": "^6.5.2",
   "rxjs-compat": "^6.5.2",
   "sweetalert2": "^7.29.0",
   "undefined": "^0.1.0",
   "web-animations-js": "github:angular/web-animations-js#release_pr208",
   "zone.js": "^0.9.1"
 },
 "devDependencies": {
   "@angular-devkit/build-angular": "~0.800.3",
   "@angular-devkit/build-ng-packagr": "~0.800.3",
   "@angular/cli": "^8.0.3",
   "@angular/compiler-cli": "^8.0.2",
   "@angular/language-service": "^8.0.2",
   "@types/googlemaps": "^3.36.5",
   "@types/jasmine": "^3.3.13",
   "@types/jasminewd2": "^2.0.6",
   "@types/node": "~12.0.8",
   "codelyzer": "^5.1.0",
   "jasmine-core": "~3.4.0",
   "jasmine-spec-reporter": "~4.2.1",
   "karma": "^4.1.0",
   "karma-chrome-launcher": "~2.2.0",
   "karma-coverage-istanbul-reporter": "^2.0.5",
   "karma-jasmine": "^2.0.1",
   "karma-jasmine-html-reporter": "^1.4.2",
   "ng-packagr": "^5.3.0",
   "node-sass": "^4.12.0",
   "protractor": "~5.4.2",
   "ts-loader": "^6.0.3",
   "ts-node": "~8.3.0",
   "tsickle": "^0.35.0",
   "tslib": "^1.10.0",
   "tslint": "~5.17.0",
   "typescript": "^3.4.5",
   "uglify-js": "^3.6.0",
   "webpack-cli": "^3.3.4"
 }
}

Answer 1

I had the same problem and was able to solve it by moving the mock window/document code below the line "import 'zone.js/dist/zone-node'", as per the comment here.

For example (server.ts):

// This line has to come before the mock window/document code:
import 'zone.js/dist/zone-node';

// This has to come after:
const domino = require('domino');
const fs = require('fs');
const path = require('path');
const template = fs.readFileSync(path.join(__dirname, '.','browser', 
'index.html')).toString();
const win = domino.createWindow(template);
global['window'] = win;
global['document'] = win.document;