Angular universal unknown error

Question

No idea what does this error mean. No idea how to debug. Maybe someone else here had similar error? Code is successfully compiled but i get a blank page in browser. I looked everywhere and were unable to find a solution..... stack ask me to add more text to this question and i don't know what else i can add in here....

server.ts:

import 'zone.js/dist/zone-node';
import 'reflect-metadata';

import { enableProdMode } from '@angular/core';

import * as express from 'express';
import { join } from 'path';

import 'localstorage-polyfill';

global['localStorage'] = localStorage;
// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Express server
const app = express();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');

// Express Engine
import { ngExpressEngine } from '@nguniversal/express-engine';
// Import module map for lazy loading
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));

// TODO: implement data requests securely
app.get('/api/*', (req, res) => {
  console.log(req, res);
  res.status(404).send('data requests are not supported');
});

// Server static files from /browser
app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));

// All regular routes use the Universal engine
app.get('*', (req, res) => {
  res.render('index', {
    req: req,
    res: res
  });
});

// Start up the Node server
app.listen(PORT, () => {
  console.log(`Node server listening on http://localhost:${PORT}`);
});

package.json:

{
  "name": "jinni-angular",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "tslint ./src/**/*.ts -t verbose",
    "e2e": "ng e2e",
    "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
    "serve:ssr": "node dist/server",
    "build:client-and-server-bundles": "ng build --prod --aot --vendor-chunk --common-chunk --build-optimizer --named-chunks && ng run jinni-angular:server",
    "webpack:server": "webpack --config webpack.server.config.js --progress --colors"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.0",
    "@angular/cdk": "github:angular/cdk-builds",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/material": "github:angular/material2-builds",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/platform-server": "^6.0.1",
    "@angular/pwa": "^0.6.1",
    "@angular/router": "^6.0.0",
    "@angular/upgrade": "^6.0.0",
    "@nguniversal/express-engine": "^6.0.0",
    "@nguniversal/module-map-ngfactory-loader": "^6.0.0",
    "@ngx-translate/core": "^9.1.1",
    "@ngx-translate/http-loader": "^2.0.1",
    "@types/underscore": "^1.8.6",
    "angular-in-memory-web-api": "^0.6.0",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.4",
    "express": "latest",
    "global": "^4.3.2",
    "hammerjs": "^2.0.8",
    "jquery": "latest",
    "localstorage-polyfill": "^1.0.1",
    "ng-custom-select": "^1.0.4",
    "ng-select": "^1.0.0-rc.3",
    "ng2-breadcrumbs": "^0.1.281",
    "ng2-carouselamos": "^3.2.0",
    "ng2-translate": "^5.0.0",
    "ng4-click-outside": "^1.0.1",
    "ng4-intl-phone": "^1.2.0",
    "ngx-device-detector": "^1.2.2",
    "ngx-dropdown": "0.0.22",
    "ngx-owl-carousel": "^2.0.7",
    "node": "^9.11.0",
    "npm": "^5.8.0",
    "rxjs": "^6.0.0",
    "rxjs-compat": "^6.1.0",
    "serve": "^6.5.3",
    "ts-loader": "^4.3.0",
    "underscore": "^1.8.3",
    "webstorage-polyfill": "^1.0.1",
    "zone.js": "^0.8.24"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.1",
    "@angular/cli": "^6.0.0",
    "@angular/compiler-cli": "^6.0.0",
    "@angular/platform-server": "^6.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.8.0",
    "@types/jasminewd2": "^2.0.3",
    "@types/node": "^6.0.45",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "lodash": "^4.16.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "phantomjs-prebuilt": "^2.1.7",
    "node-sass": "^4.7.2",
    "protractor": "~5.3.0",
    "ts-node": "^5.0.1",
    "tslint": "^5.9.1",
    "typescript": "2.7.2",
    "ts-loader": "^4.2.0",
    "webpack-cli": "^2.0.14"
  },
  "repository": {}
}

Answer 1

Actually I got the same kind of error. After using debugging and source map I found out the issue comes from here in my server.js:

Zone.__load_patch('console', function (global, Zone) {
    var consoleMethods = ['dir', 'log', 'info', 'error', 'warn', 'assert', 'debug', 'timeEnd', 'trace'];
    consoleMethods.forEach(function (m) {
        var originalMethod = console[Zone.__symbol__(m)] = console[m];
        if (originalMethod) {
            console[m] = function () {
                var args = ArraySlice.call(arguments);
                if (Zone.current === Zone.root) {
// Error here
                    return originalMethod.apply(this, args);
                }
                else {
                    return Zone.root.run(originalMethod, this, args);
                }
            };
        }
    });
}); 

Really disappointing and hard to debug.

Edit: after activating breakpoints on 'All Exceptions' I got more info about the source of the error. It is from a dependency with a 'document' reference. At least I know what to fix. I hope it helps someone else.