Universal: TypeError: Cannot read property 'stringify' of undefined

Created on 27 Jan 2019 · 12Comments · Source: angular/universal

Bug Report

What is the current behavior?

server.ts

(global as any).WebSocket = require('ws');
(global as any).XMLHttpRequest = require('xhr2');

import 'zone.js/dist/zone-node';
import { enableProdMode } from '@angular/core';
// Express Engine
import { ngExpressEngine } from '@nguniversal/express-engine';
// Import module map for lazy loading
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';

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

// 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/browser');

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

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

// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine('html', ngExpressEngine({
    bootstrap: AppServerModuleNgFactory,
    providers: [
        provideModuleMap(LAZY_MODULE_MAP)
    ]
}));

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

// Example Express Rest API endpoints
// app.get('/api/**', (req, res) => { });
// Serve static files from /browser
app.get('*.*', express.static(DIST_FOLDER, {
    maxAge: '1y'
}));

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

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

I'm using angular material. And I added these lines of code from another issue because of window is not defined error. When I run "npm run build:ssr" no error occurs. But when I run "npm run serve:ssr" gives me an error.
Added code:

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

Error:

TypeError: Cannot read property 'stringify' of undefined

What modules are related to this issue?

- [ ] aspnetcore-engine
- [ ] common
- [+] express-engine
- [ ] hapi-engine
- [ ] module-map-ngfactory-loader

Minimal reproduction with instructions:

What is the use-case or motivation for changing an existing behavior?

Environment:

Angular CLI: 7.0.7
Node: 8.14.0
OS: darwin x64
Angular: 7.2.2
... animations, cdk, common, compiler, compiler-cli, core, forms
... http, language-service, material, platform-browser
... platform-browser-dynamic, platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.10.7
@angular-devkit/build-angular     0.10.7
@angular-devkit/build-optimizer   0.10.7
@angular-devkit/build-webpack     0.10.7
@angular-devkit/core              7.0.7
@angular-devkit/schematics        7.0.7
@angular/cli                      7.0.7
@angular/fire                     5.1.1
@angular/flex-layout              7.0.0-beta.23
@ngtools/webpack                  7.0.7
@schematics/angular               7.0.7
@schematics/update                0.10.7
rxjs                              6.3.3
typescript                        3.1.3
webpack                           4.19.1

npm version: 6.4.1



md5-17b3c700f28b63b6155cc5a32d57b917



/Users/louis/codes/angar/dist/server.js:198209
e.Lb=function(a,b,c){a=this.ka.J[String(a)];if(!a)return!0;a=a.concat();for(var d=!0,f=0;f<a.length;++f){var g=a[f];if(g&&!g.Sa&&g.capture==b){var k=g.listener,p=g.Ob||g.src;g.Eb&&this.Le(g);d=!1!==k.call(p,c)&&d;}}return d&&0!=c.Be};e.jb=function(a,b,c,d){return this.ka.jb(String(a),b,c,d)};var ub=h.JSON.stringify;function vb(a,b){this.Sf=100;this.ef=a;this.ug=b;this.Zb=0;this.Pb=null;}vb.prototype.get=function(){if(0<this.Zb){this.Zb--;var a=this.Pb;this.Pb=a.next;a.next=null;}else a=this.ef();return a};vb.prototype.put=function(a){this.ug(a);this.Zb<this.Sf&&(this.Zb++, a.next=this.Pb, this.Pb=a);};function I(){this.lc=this.Va=null;}var xb=new vb(function(){return new wb},function(a){a.reset();});I.prototype.add=function(a,b){var c=this.Af();c.set(a,b);this.lc?this.lc.next=c:this.Va=c;this.lc=c;};I.prototype.remove=function(){var a=null;this.Va&&(a=this.Va, this.Va=this.Va.next, this.Va||(this.lc=null), a.next=null);return a};I.prototype.wg=function(a){xb.pu

TypeError: Cannot read property 'stringify' of undefined
    at Module.<anonymous> (/Users/louis/codes/angar/dist/server.js:198209:308)
    at __webpack_require__ (/Users/louis/codes/angar/dist/server.js:20:30)
    at Module.<anonymous> (/Users/louis/codes/angar/dist/server.js:176841:86)
    at __webpack_require__ (/Users/louis/codes/angar/dist/server.js:20:30)
    at Module.<anonymous> (/Users/louis/codes/angar/dist/server.js:176811:77)
    at __webpack_require__ (/Users/louis/codes/angar/dist/server.js:20:30)
    at Module.<anonymous> (/Users/louis/codes/angar/dist/server.js:176771:76)
    at __webpack_require__ (/Users/louis/codes/angar/dist/server.js:20:30)
    at Module.<anonymous> (/Users/louis/codes/angar/dist/server.js:176398:75)
    at __webpack_require__ (/Users/louis/codes/angar/dist/server.js:20:30)

repro steps

Source

ghost

👀1 👍1

All 12 comments

Please either provide a minimal reproduction that shows that this is a Universal issue, or alternatively use StackOverflow or Gitter for support issues.