universal: Universal works great on local computer, but same code fails on digital ocean server

• I’m submitting a …

- [x] bug report
- [ ] feature request
- [ ] support request => Please do not submit support request here, see note at the top of this template.

• What modules are related to this Issue?

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

• Do you want to request a feature or report a bug? bug

• What is the current behavior? I run my universal build locally and it works great, but if I put the same code on the server and run it then it fails. For testing purposes I am running the docker node:8 image like this run -dit --name universal -v /Users/TMay/Sites/blog-ui:/site -p 4200:4200 node:8.

I am running this node image both locally and on the server so environments should be identical. Currently what is happening to me is that if I visit localhost:4200 locally then I see the server side rendered app. And when I visit xxx.xxx.xxx.xxx:4200 on the server it hangs for a long time, seems close to a minute and then finally fails and I get an error saying Converting circular structure to JSON. I will try to provide my stack traces below.

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem by creating a github repo. I have created a demo branch that I will not touch for you to see replicate the issue. https://github.com/itmayziii/blog-ui/tree/angular_universal_demo

UPDATE 3/24/2018 This same behavior happens on the universal starter repo, https://github.com/angular/universal-starter, If you add a route resolver to one of the routes and that resolver uses the HttpClient to make a request, then then it will error TypeError: Converting circular structure to JSON . If you are testing this, you can not simply do an Observable.of to simulate the behavior, the problem appear to only happen when using the HttpClient.

The command I am using to build the universal app is npm run build:universal Then to start the node process npm run start:universal

• What is the expected behavior? To work both locally and on a remote server 😃

• What is the motivation / use case for changing the behavior? I love Angular and getting Universal to work would be amazing!

• Please tell us about your environment:

• Angular version: 5.2.9
• Browser: all
• Language: TypeScript 2.6.2
• OS: Linux
• Platform: NodeJS

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

I want to say this is not a CORS issue, the API that Angular is hitting is currently set up to allow all requests regardless of origin, I tested this by performing an XHR request from the google homepage to that api endpoint.

I should say that the first error below from HttpErrorInterceptor is from a console.error that I have running anytime a request fails. The Angular error happens right after that starting with ERROR { TypeError: Converting circular structure to JSON

HttpErrorInterceptor: Failed to make a GET request to categories, with response HttpErrorResponse { headers: HttpHeaders { normalizedNames: Map {}, lazyUpdate: null, headers: Map {} }, status: 0, statusText: 'Unknown Error', url: null, ok: false, name: 'HttpErrorResponse', message: 'Http failure response for (unknown url): 0 Unknown Error', error: ProgressEvent { type: 'error', target: XMLHttpRequest { onloadstart: null, onprogress: null, onabort: null, onerror: null, onload: null, ontimeout: null, onloadend: null, _listeners: [Object], onreadystatechange: null, _anonymous: undefined, readyState: 4, response: null, responseText: '', responseType: 'text', responseURL: '', status: 0, statusText: '', timeout: 0, upload: [Object], _method: 'GET', _url: [Object], _sync: false, _headers: [Object], _loweredHeaders: [Object], _mimeOverride: null, _request: null, _response: null, _responseParts: null, _responseHeaders: null, _aborting: null, _error: null, _loadedBytes: 0, _totalBytes: 0, _lengthComputable: false, withCredentials: true }, currentTarget: XMLHttpRequest { onloadstart: null, onprogress: null, onabort: null, onerror: null, onload: null, ontimeout: null, onloadend: null, _listeners: [Object], onreadystatechange: null, _anonymous: undefined, readyState: 4, response: null, responseText: '', responseType: 'text', responseURL: '', status: 0, statusText: '', timeout: 0, upload: [Object], _method: 'GET', _url: [Object], _sync: false, _headers: [Object], _loweredHeaders: [Object], _mimeOverride: null, _request: null, _response: null, _responseParts: null, _responseHeaders: null, _aborting: null, _error: null, _loadedBytes: 0, _totalBytes: 0, _lengthComputable: false, withCredentials: true }, lengthComputable: false, loaded: 0, total: 0 } } ERROR { TypeError: Converting circular structure to JSON at JSON.stringify (<anonymous>) at readableObjectToString (/site/dist/server.js:126185:63) at resolvePromise (/site/dist/server.js:126335:69) at resolvePromise (/site/dist/server.js:126301:17) at /site/dist/server.js:126384:17 at ZoneDelegate.invokeTask (/site/dist/server.js:125947:31) at Object.onInvokeTask (/site/dist/server.js:13561:33) at ZoneDelegate.invokeTask (/site/dist/server.js:125946:36) at Zone.runTask (/site/dist/server.js:125714:47) at drainMicroTaskQueue (/site/dist/server.js:126121:35) rejection: HttpErrorResponse { headers: HttpHeaders { normalizedNames: Map {}, lazyUpdate: null, headers: Map {} }, status: 0, statusText: 'Unknown Error', url: null, ok: false, name: 'HttpErrorResponse', message: 'Http failure response for (unknown url): 0 Unknown Error', error: ProgressEvent { type: 'error', target: [Object], currentTarget: [Object], lengthComputable: false, loaded: 0, total: 0 } }, promise: ZoneAwarePromise { __zone_symbol__state: 0, __zone_symbol__value: HttpErrorResponse { headers: [Object], status: 0, statusText: 'Unknown Error', url: null, ok: false, name: 'HttpErrorResponse', message: 'Http failure response for (unknown url): 0 Unknown Error', error: [Object] } }, zone: Zone { _properties: { isAngularZone: true }, _parent: Zone { _properties: {}, _parent: null, _name: '<root>', _zoneDelegate: [Object] }, _name: 'angular', _zoneDelegate: ZoneDelegate { _taskCounts: [Object], zone: [Circular], _parentDelegate: [Object], _forkZS: null, _forkDlgt: null, _forkCurrZone: [Object], _interceptZS: null, _interceptDlgt: null, _interceptCurrZone: [Object], _invokeZS: [Object], _invokeDlgt: [Object], _invokeCurrZone: [Circular], _handleErrorZS: [Object], _handleErrorDlgt: [Object], _handleErrorCurrZone: [Circular], _scheduleTaskZS: [Object], _scheduleTaskDlgt: [Object], _scheduleTaskCurrZone: [Circular], _invokeTaskZS: [Object], _invokeTaskDlgt: [Object], _invokeTaskCurrZone: [Circular], _cancelTaskZS: [Object], _cancelTaskDlgt: [Object], _cancelTaskCurrZone: [Circular], _hasTaskZS: [Object], _hasTaskDlgt: [Object], _hasTaskDlgtOwner: [Circular], _hasTaskCurrZone: [Circular] } }, task: ZoneTask { _zone: Zone { _properties: [Object], _parent: [Object], _name: 'angular', _zoneDelegate: [Object] }, runCount: 0, _zoneDelegates: null, _state: 'notScheduled', type: 'microTask', source: 'Promise.then', data: undefined, scheduleFn: undefined, cancelFn: null, callback: [Function], invoke: [Function] } }