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

Created on 23 Mar 2018  路  16Comments  路  Source: angular/universal
  • 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.

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

picture itmayziii

All 16 comments

This issue can be closed.

If anyone encounters the same issue, my problem was that when creating a digital ocean droplet, the server had default firewall rules that was preventing certain HTTP and HTTPS traffic, I changed the server to allow all HTTP and HTTPS traffic sudo ufw allow http sudo ufw allow https and now the HttpClient finally works.

itmayziii picture itmayziii on 26 Mar 2018

Thanks for the update :D

Toxicable picture Toxicable on 26 Mar 2018

@itmayziii : I am getting the same issue, when i use the docker-compose.
Here is the details of docker-compose.

But this is happening in my local docker (MAC OS).

Have you encountered same error in docker while in development phase!

ssatz picture ssatz on 23 Apr 2018

@ssatz My only advice would be to make sure that you can talk to each of the containers that you need to from inside the other containers. Go into your Nginx container and make sure you can communicate with the laravel API etc...

itmayziii picture itmayziii on 23 Apr 2018

@itmayziii : Thanks adding ufw allow http solves the issue

ssatz picture ssatz on 24 Apr 2018

I have the same problem but in Jenkins pipeline :/, any solution ?

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: 'POST',
        _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 },
     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: 'POST',
        _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 },
     lengthComputable: false,
     loaded: 0,
     total: 0 } }
RubensTen picture RubensTen on 8 Jun 2018

@itmayziii : am getting same error when requested api is https.
ufw enabling https doesn't solve the issue.

But this is working fine in my local environment where using self signed certificate

ssatz picture ssatz on 12 Jun 2018

@ssatz It's hard to say exactly what it is. I would disable your firewall completely and see if it works. If it works then you can start looking at your firewall rules one by one to determine the issue. Otherwise If it still does not work, I would re-file a bug with this library.

itmayziii picture itmayziii on 12 Jun 2018

@RubensTen Do you get the error inside of the Jenkins pipeline or from the server you deployed to after Jenkins build it?

itmayziii picture itmayziii on 12 Jun 2018

@itmayziii Jenkins call the pipeline and then inside this process call npm script that make a dist with Angular Universal, and then when run this process and take routes with the http request send this error :/

this error are generated only with some routes

NOTE: When Angular universal build the routes and this routes send http request, my enviroments endpoints containt a https and have disable CORS.
I use the angular universal to generate Prerendering

RubensTen picture RubensTen on 13 Jun 2018

I have a similar issue. Angular Universal works fine in local but does not work in production.
Local is in Mac and production is in CentOS7.

The app itself looks fine but I don't see the server side rendering. Of course, meta tags are not updated.

ERROR { TypeError: Converting circular structure to JSON
at Object.stringify (native)
at readableObjectToString (/var/www/myapp/node_modules/zone.js/dist/zone-node.js:652:63)
at resolvePromise (/var/www/myapp/node_modules/zone.js/dist/zone-node.js:814:69)
at /var/www/myapp/node_modules/zone.js/dist/zone-node.js:724:17
at rejected (/var/www/myapp/server/main.js:1156:89)
at ZoneDelegate.invoke (/var/www/myapp/node_modules/zone.js/dist/zone-node.js:388:26)
at Object.onInvoke (/var/www/myapp/node_modules/@angular/core/bundles/core.umd.js:3877:37)
at ZoneDelegate.invoke (/var/www/myapp/node_modules/zone.js/dist/zone-node.js:387:32)
at Zone.run (/var/www/myapp/node_modules/zone.js/dist/zone-node.js:138:43)
at /var/www/myapp/node_modules/zone.js/dist/zone-node.js:872:34
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: '',
_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: ZoneAwarePromise { __zone_symbol__state: true, __zone_symbol__value: undefined },
scheduleFn: undefined,
cancelFn: null,

comsiro picture comsiro on 29 Jul 2018
👍1

@comsiro : if you have installed SSL , change ssl_ecdh_curve prime256v1;

    ssl_protocols TLSv1.2 TLSv1.1 TLSv1;
    ssl_prefer_server_ciphers on;

    ssl_ciphers ECDH+AESGCM:ECDH+AES256:ECDH+AES128:DH+3DES:!ADH:!AECDH:!MD5;

    ssl_ecdh_curve prime256v1;
    ssl_session_tickets off;

    # OCSP stapling
    ssl_stapling on;
    ssl_stapling_verify on;
    resolver 8.8.8.8;`

More for details check out this issue

ssatz picture ssatz on 29 Jul 2018

@ssatz

Thank you for your suggestion but it does not fix the error in my server. I tested with node@8 and node@10 but nothing fix it.

One thing I am quite sure is that the error is related to https.

I use Angular 6 Universal + Nginx1.12.1(proxy) + express api server. I set primev256v1 to all servers.

comsiro picture comsiro on 29 Jul 2018
👍1

@itmayziii can you please clarify where you ran sudo ufw allow http or sudo ufw allow https as the console in the service app is not allowing it - default path is \home\site\wwroot?

vazkr picture vazkr on 5 Nov 2018

I have a similar issue. Angular Universal works fine in local but does not work in production.
Local is in Mac and production is in CentOS7.

The app itself looks fine but I don't see the server side rendering. Of course, meta tags are not updated.

ERROR { TypeError: Converting circular structure to JSON
at Object.stringify (native)
at readableObjectToString (/var/www/myapp/node_modules/zone.js/dist/zone-node.js:652:63)
at resolvePromise (/var/www/myapp/node_modules/zone.js/dist/zone-node.js:814:69)
at /var/www/myapp/node_modules/zone.js/dist/zone-node.js:724:17
at rejected (/var/www/myapp/server/main.js:1156:89)
at ZoneDelegate.invoke (/var/www/myapp/node_modules/zone.js/dist/zone-node.js:388:26)
at Object.onInvoke (/var/www/myapp/node_modules/@angular/core/bundles/core.umd.js:3877:37)
at ZoneDelegate.invoke (/var/www/myapp/node_modules/zone.js/dist/zone-node.js:387:32)
at Zone.run (/var/www/myapp/node_modules/zone.js/dist/zone-node.js:138:43)
at /var/www/myapp/node_modules/zone.js/dist/zone-node.js:872:34
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: '',
_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: ZoneAwarePromise { __zone_symbol__state: true, __zone_symbol__value: undefined },
scheduleFn: undefined,
cancelFn: null,

I have this same exact error but in my universal server side rendering... Have you had any luck?

TylerOrtiz picture TylerOrtiz on 9 Jan 2019
👍1

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._

angular-automatic-lock-bot[bot] picture angular-automatic-lock-bot[bot] on 5 Sep 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

atlmtw picture atlmtw  路  4Comments
k-schneider picture k-schneider  路  4Comments
LendsMan picture LendsMan  路  6Comments
dmitriytretyakov picture dmitriytretyakov  路  5Comments
flexchintoo picture flexchintoo  路  5Comments