ReferenceError: Zone is not defined

[ArDotWeb]

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" } }

[ramonwrocha]

Check your use of browser-specific objects, such as window, document, or location. These don’t exist on the server. You shouldn’t be using these anyway; try using an injectable Angular abstraction, such as Document or Location. As a last resort, if you do truly need them, wrap their usage in a conditional statement, so that they’ll only be used by Angular on the browser. You can do this by importing the functions isPlatformBrowser and isPlatformServer from @angular/common, injecting the PLATFORM_ID token into your component, and running the imported functions to see whether you’re on the server or the browser.

[alan-agius4]

Thanks for reporting this issue. Luckily, it has already been fixed in one of the recent releases.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}