Angular 4 Universal SSR- ReferenceError: document is not defined

154
January 01, 2020, at 10:20 AM

I am trying to accomplish Server side rendering for Angular 4 but getting error "ReferenceError: document is not defined" -some people suggested to add domino.js but still getting error after adding domino js in server.ts and adding uglify.js in webpack.

info: seed project from https://github.com/fulls1z3/universal/tree/v1.1.0

ReferenceError: document is not defined
at Object.<anonymous> (F:\Adventure\app-Web\.server\server.js:1:3990009)
at Object.e.exports (F:\Adventure\app-Web\.server\server.js:1:3999729)
at __webpack_require__ (F:\Adventure\app-Web\.server\server.js:1:199)
at Object.defineProperty.value (F:\Adventure\app-Web\.server\server.js:1:3905612)
at __webpack_require__ (F:\Adventure\app-Web\.server\server.js:1:199)
at Object.r (F:\Adventure\app-Web\.server\server.js:1:3904988)
at __webpack_require__ (F:\Adventure\app-Web\.server\server.js:1:199)
at Object.defineProperty.value (F:\Adventure\app-Web\.server\server.js:1:3904562)
at __webpack_require__ (F:\Adventure\app-Web\.server\server.js:1:199)
at Object.<anonymous> (F:\Adventure\app-Web\.server\server.js:1:2841647)
[nodemon] app crashed - waiting for file changes before starting...

server.js

    // polyfills
import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import 'rxjs/Rx';
import { renderModuleFactory } from '@angular/platform-server';
const domino = require("domino");
const fs = require("fs");
const path = require("path");
const templateA = fs.readFileSync(path.join("F:\\Adventure\\app-Web\\public\\index.html")).toString();   //.readFileSync(path.join("dist/browser", "index.html"))
console.log(templateA);
//src\client\index.html
//
  const win = domino.createWindow(templateA);
win.Object = Object;
win.Math = Math;

global["window"] = win;
// not implemented property and functions
Object.defineProperty(win.document.body.style, 'transform', {
  value: () => {
    return {
      enumerable: true,
      configurable: true,
    };
  },
});
global['document'] = win.document;
global["branch"] = null;
global["object"] = win.object;


// angular
import { enableProdMode } from '@angular/core';
// libs
import * as express from 'express';
import * as compression from 'compression';
import { ngExpressEngine } from '@nguniversal/express-engine';
// module
import { AppServerModule } from './app/app.server.module';

enableProdMode();
const server = express();
server.use(compression());
/**
 * Set view engine
 */
server.engine('html', ngExpressEngine({
  bootstrap: AppServerModule
}));
server.set('view engine', 'html');
server.set('views', 'public');
/**
 * Point static path to `public`
 */
server.use('/', express.static('public', {index: false}));
/**
 * Catch all routes and return the `index.html`
 */
server.get('*', (req, res) => {
  res.render('../public/index.html', {
  req,
    res
  });
});
/**
 * Port & host settings
 */
const port = 8000;
const PORT = process.env.PORT || port;
const HOST = process.env.BASE_URL || 'localhost';
const baseUrl = `http://${HOST}:${PORT}`;
server.set('port', PORT);
/**
 * Begin listening
 */
server.listen(server.get('port'), () => {
  // tslint:disable-next-line
  console.log(`Express server listening on ${baseUrl}`);
});

package.json

{
"name": "App",
"version": "2.0.0-beta.1",
"description": "App- app -  portal",
"repository": {
  "type": "git"
},
"author": {
},
"license": "MIT",
"scripts": {
  "build:spa-dev": "gulp clean && gulp build:spa-dev --env dev",
  "build:spa-prod:stag": "gulp clean && gulp build:spa-prod --env stag",
  "build:spa-prod:prod": "gulp clean && gulp build:spa-prod --env prod",
  "build:universal-dev": "gulp clean && gulp build:universal-dev --env dev",
  "build:universal-prod:stag": "gulp clean && gulp build:universal-prod --env stag",
  "build:universal-prod:prod": "gulp clean && node --max-old-space-size=8192 ./node_modules/gulp/bin/gulp.js build:universal-prod --env prod",
  "serve": "npm run serve:universal",
  "serve:spa": "nodemon ./.server/spa-server.js",
  "serve:spa-hmr": "node ./.server/spa-server.hmr.js",
  "serve:universal": "nodemon ./.server/server.js",
  "test": "karma start",
  "start:uni": "run-s build:universal-dev serve:universal",
  "start:uni-p:stag": "run-s build:universal-prod:stag serve:universal",
  "start:uni-p:prod": "run-s build:universal-prod:prod serve:universal",
  "start": "run-s build:spa-dev serve:spa-hmr",
  "start-p:stag": "run-s build:spa-prod:stag serve:spa-hmr",
  "start-p:prod": "run-s build:spa-prod:prod serve:spa-hmr",
  "build:universal-prod:prod:max-size": "gulp clean && node --max-old-space-size=8192 ./node_modules/gulp/bin/gulp.js build:universal-prod --env prod"
},
"dependencies": {
  "@angular/animations": "4.1.0",
  "@angular/cdk": "2.0.0-beta.8",
  "@angular/common": "~4.1.0",
  "@angular/core": "~4.1.0",
  "@angular/forms": "~4.1.0",
  "@angular/http": "~4.1.0",
  "@angular/material": "2.0.0-beta.8",
  "@angular/platform-browser": "~4.1.0",
  "@angular/platform-browser-dynamic": "~4.1.0",
  "@angular/platform-server": "~4.1.0",
  "@angular/router": "~4.1.0",
  "@angularclass/bootloader": "^1.0.1",
  "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.26",
  "@nguniversal/express-engine": "^1.0.0-beta.2",
  "@ngx-cache/core": "~0.4.0-beta.1",
  "@ngx-cache/fs-storage": "~0.4.0-beta.2",
  "@ngx-cache/platform-browser": "~0.4.0-beta.1",
  "@ngx-cache/platform-server": "~0.4.0-beta.1",
  "@ngx-config/core": "~0.2.0-rc.5",
  "@ngx-config/fs-loader": "~0.2.0-beta.1",
  "@ngx-config/http-loader": "~0.2.0-rc.1",
  "@ngx-i18n-router/config-loader": "~0.2.0-rc.3",
  "@ngx-i18n-router/core": "~0.4.0-beta.2",
  "@ngx-meta/core": "~0.4.0-rc.2",
  "@ngx-translate/core": "^6.0.1",
  "@ngx-translate/http-loader": "~0.0.3",
  "@ngx-universal/config-loader": "~0.4.0-rc.1",
  "@ngx-universal/state-transfer": "~0.4.0-beta.1",
  "@ngx-universal/translate-loader": "~0.4.0-beta.1",
  "@trademe/ng-defer-load": "^3.1.0",
  "@types/jquery": "^2.0.54",
  "@types/slick-carousel": "^1.6.32",
  "angular2-markdown": "^1.6.0",
  "angular2-text-mask": "^9.0.0",
  "angular2-toaster": "^4.0.0",
  "angulartics-google-analytics": "^0.4.0",
  "angulartics2": "^2.5.0",
  "body-parser": "^1.17.2",
  "bootstrap": "^4.3.1",
  "compression": "^1.6.2",
  "core-js": "^2.4.1",
  "debug": "^2.6.8",
  "domino": "^2.1.4",
  "enhanced-resolve": "3.3.0",
  "express": "^4.15.3",
  "fs": "0.0.1-security",
  "hammerjs": "^2.0.8",
  "jquery": "^3.4.1",
  "lodash": "^4.17.15",
  "moment": "^2.18.1",
  "moment-timezone": "^0.5.26",
  "money": "^0.2.0",
  "morgan": "^1.8.1",
  "ng-gallery": "^0.7.1",
  "ng-http": "^3.0.1",
  "ng2-material-dropdown": "^0.7.7",
  "ng2-odometer": "^1.1.3",
  "ng2-page-scroll": "4.0.0-beta.8",
  "ng4-mask": "^1.0.5",
  "ngx-chips": "^2.1.0",
  "ngx-mask": "^8.1.6",
  "ngx-pagination": "^3.0.3",
  "ngx-sharebuttons": "^3.0.0",
  "ngx-smart-modal": "^3.1.0",
  "node-pre-gyp": "^0.13.0",
  "nouislider": "^10.0.0",
  "path": "^0.12.7",
  "rxjs": "^5.4.0",
  "sitemap-generator": "^8.4.2",
  "sjcl": "^1.0.6",
  "slick-carousel": "^1.6.0",
  "zone.js": "0.8.12"
},
"devDependencies": {
  "@angular/cli": "^7.3.9",
  "@angular/compiler": "~4.1.0",
  "@angular/compiler-cli": "~4.1.0",
  "@ngtools/webpack": "^1.3.1",
  "@types/core-js": "^0.9.41",
  "@types/express": "^4.17.1",
  "@types/jasmine": "^2.5.47",
  "@types/lodash": "^4.14.138",
  "@types/node": "^7.10.7",
  "add-asset-html-webpack-plugin": "^2.0.1",
  "angular-tslint-rules": "^1.20.0",
  "angular2-template-loader": "0.6.0",
  "assets-webpack-plugin": "^3.5.1",
  "async": "^2.6.3",
  "autoprefixer": "^7.1.1",
  "awesome-typescript-loader": "^3.1.3",
  "bootstrap-sass": "^3.3.7",
  "bootstrap-sass-loader": "^1.0.10",
  "codelyzer": "^3.0.1",
  "colorguard": "^1.2.0",
  "command-line-args": "^4.0.6",
  "compression-webpack-plugin": "^0.4.0",
  "copy-webpack-plugin": "^4.0.1",
  "css-loader": "^0.28.2",
  "extract-text-webpack-plugin": "^2.1.0",
  "file-loader": "^0.11.1",
  "gulp": "4.0.0",
  "gulp-changed": "^3.1.0",
  "gulp-debug": "^3.1.0",
  "gulp-exec": "^2.1.3",
  "gulp-ignore": "^2.0.2",
  "gulp-load-plugins": "^1.5.0",
  "gulp-postcss": "^7.0.0",
  "gulp-replace": "^0.5.4",
  "gulp-sass": "^3.1.0",
  "gulp-sass-lint": "^1.3.2",
  "gulp-sourcemaps": "^2.6.0",
  "gulp-tslint": "^8.0.0",
  "html-elements-webpack-plugin": "^1.0.1",
  "html-loader": "^0.4.5",
  "html-webpack-plugin": "^2.28.0",
  "husky": "^0.13.4",
  "istanbul-instrumenter-loader": "^2.0.0",
  "jasmine-core": "^2.6.2",
  "jasmine-spec-reporter": "~3.2.0",
  "json-loader": "^0.5.4",
  "json-sub": "1.1.0",
  "karma": "^1.7.0",
  "karma-chrome-launcher": "^2.1.1",
  "karma-cli": "~1.0.1",
  "karma-coverage": "^1.1.1",
  "karma-coverage-istanbul-reporter": "^1.2.1",
  "karma-jasmine": "^1.1.0",
  "karma-jasmine-html-reporter": "^0.2.2",
  "karma-mocha-reporter": "^2.2.3",
  "karma-sourcemap-loader": "^0.3.7",
  "karma-webpack": "^2.0.3",
  "lazypipe": "^1.0.1",
  "ng-router-loader": "^2.1.0",
  "node-sass": "^4.5.3",
  "nodemon": "^1.19.2",
  "npm-run-all": "^4.0.2",
  "optimize-js-plugin": "^0.0.4",
  "postcss-loader": "^2.0.5",
  "postcss-reporter": "^3.0.0",
  "postcss-scss": "^1.0.0",
  "protractor": "~5.1.0",
  "raw-loader": "^0.5.1",
  "rimraf": "^2.7.1",
  "sass-loader": "^6.0.5",
  "script-ext-html-webpack-plugin": "^1.8.0",
  "source-map-loader": "^0.2.1",
  "style-loader": "^0.18.0",
  "stylefmt": "^5.3.2",
  "stylefmt-loader": "^1.2.3",
  "stylelint": "^7.10.1",
  "to-string-loader": "^1.1.5",
  "ts-node": "~2.0.0",
  "tslib": "^1.7.1",
  "tslint": "^5.20.0",
  "tslint-loader": "^3.5.3",
  "typescript": "^3.6.3",
  "uglify-js": "^3.6.0",
  "uglifyjs-webpack-plugin": "^1.3.0",
  "url-loader": "^0.5.9",
  "webpack": "^2.6.1",
  "webpack-bundle-analyzer": "^3.5.0",
  "webpack-dll-bundles-plugin": "^1.0.0-beta.5",
  "webpack-hot-middleware": "^2.18.0",
  "webpack-merge": "^4.2.2"
}
}
READ ALSO
Unable to call cloudwatch putMetricData in nodejs lambda function

Unable to call cloudwatch putMetricData in nodejs lambda function

I'm trying to use putmetric method to push some logs from my code,Everything is getting executed except this part cwputMetricData and my requirement is the handler should be async

73
i can&#39;t load data from mongoDB using Angular 8

i can't load data from mongoDB using Angular 8

I can't load data from MongoDB using Angular 8

88
Nest can&#39;t resolve dependencies of the DatabaseService (?)

Nest can't resolve dependencies of the DatabaseService (?)

I can't figure out why it's not able to resolve the DATABASE_CONFIG dependencyIt was OK yesterday, then I moved things around and it stopped working

73
Android removing notification data in group notification when new notification is added to the group

Android removing notification data in group notification when new notification is added to the group

My group notifications are working fine, however, I noticed that after a couple of hours (When not using the device for a while) when a new notification comes, the message content disappears when the notification is expanded, that is, setStyle(new NotificationCompatBigTextStyle()

98