title: ReferenceError: Zone is not defined
body: <p>I want to enable server side rendering on my Angular project(Angular 8) with <code>Angular Universal</code>. When I run the
  following command, It will create 2 folders in <code>dist</code> folder named server and browser and another file named server.js</p>
  
  <pre><code>npm run build:ssr
  </code></pre>
  
  <p>and then run the following command</p>
  
  <pre><code>npm run serve:ssr
  </code></pre>
  
  <p>I get the following error:</p>
  
  <blockquote>
    <p>Zone.__load_patch('ZoneAwarePromise', function (global, Zone, api) {
        ^
    ReferenceError: Zone is not defined</p>
  </blockquote>
  
  <p><strong>NOTE:</strong></p>
  
  <p>The first time that I run the command (<strong>npm run serve:ssr</strong>) I got the following error</p>
  
  <pre><code>var DragEvent = window.DragEvent;
  ^
  ReferenceError: window is not defined
  </code></pre>
  
  <p>It fixed by adding the code below in the start of server.js file in dist folder</p>
  
  <pre><code>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;
  </code></pre>
  
  <p>and here is my package.json </p>
  
  <pre><code>   {
   "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 &amp;&amp; npm run compile:server",
     "build:client-and-server-bundles": "ng build --prod &amp;&amp; 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"
   }
  }
  </code></pre>