Angular Universer -typeError：将圆形结构转换为JSON

Question

我有一个大问题，与角服务器端渲染（SSR），解析器和HTTP请求的使用情况有关。 我正在Angular 13建立一个项目，但我决定实施SSR，以改善SEO和重定向的体验，以防URL结构发生变化。

我决定通过 ng添加 @nguniversal/express-engine ，如。不幸的是，当我使用 ng运行项目启动应用程序时：serve-ssr 都正确构建，但是当我访问主页时，将解析器与使用 ng-openapi-gen生成的服务一起使用时>，该页面没有渲染，我会收到以下错误。

ERROR TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'XMLHttpRequest'
    |     property 'upload' -> object with constructor 'XMLHttpRequestUpload'
    --- property '_request' closes the circle
    at JSON.stringify (<anonymous>)
    at readableObjectToString (/home/user/project/dist/project/server/main.js:122623:59)
    at resolvePromise (/home/user/project/dist/project/server/main.js:122823:59)
    at resolvePromise (/home/user/project/dist/project/server/main.js:122770:11)
    at /home/user/project/dist/project/server/main.js:122897:11
    at _ZoneDelegate.invokeTask (/home/user/project/dist/project/server/main.js:121862:173)
    at Object.onInvokeTask (/home/user/project/dist/project/server/main.js:205242:33)
    at _ZoneDelegate.invokeTask (/home/user/project/dist/project/server/main.js:121862:56)
    at Zone.runTask (/home/user/project/dist/project/server/main.js:121612:39)
    at drainMicroTaskQueue (/home/user/project/dist/project/server/main.js:122082:25) {
  rejection: HttpErrorResponse {
    headers: HttpHeaders {
      normalizedNames: Map {},
      lazyUpdate: null,
      headers: Map {}
    },
    status: 0,
    statusText: 'Unknown Error',
    url: 'https://localhost:4200/api/v1/chords/',
    ok: false,
    name: 'HttpErrorResponse',
    message: 'Http failure response for https://localhost:4200/api/v1/chords/: 0 Unknown Error',
    error: ProgressEvent {
      type: 'error',
      target: [XMLHttpRequest],
      currentTarget: [XMLHttpRequest],
      lengthComputable: false,
      loaded: 0,
      total: 0
    }
  },
  promise: ZoneAwarePromise [Promise] {
    __zone_symbol__state: 0,
    __zone_symbol__value: HttpErrorResponse {
      headers: [HttpHeaders],
      status: 0,
      statusText: 'Unknown Error',
      url: 'https://localhost:4200/api/v1/chords/',
      ok: false,
      name: 'HttpErrorResponse',
      message: 'Http failure response for https://localhost:4200/api/v1/chords/: 0 Unknown Error',
      error: [ProgressEvent]
    }
  },
  zone: Zone {
    _parent: Zone {
      _parent: null,
      _name: '<root>',
      _properties: {},
      _zoneDelegate: [_ZoneDelegate]
    },
    _name: 'angular',
    _properties: { isAngularZone: true },
    _zoneDelegate: _ZoneDelegate {
      _taskCounts: [Object],
      zone: [Circular],
      _parentDelegate: [_ZoneDelegate],
      _forkZS: null,
      _forkDlgt: null,
      _forkCurrZone: null,
      _interceptZS: null,
      _interceptDlgt: null,
      _interceptCurrZone: null,
      _invokeZS: [Object],
      _invokeDlgt: [_ZoneDelegate],
      _invokeCurrZone: [Circular],
      _handleErrorZS: [Object],
      _handleErrorDlgt: [_ZoneDelegate],
      _handleErrorCurrZone: [Circular],
      _scheduleTaskZS: [Object],
      _scheduleTaskDlgt: [_ZoneDelegate],
      _scheduleTaskCurrZone: [Circular],
      _invokeTaskZS: [Object],
      _invokeTaskDlgt: [_ZoneDelegate],
      _invokeTaskCurrZone: [Circular],
      _cancelTaskZS: [Object],
      _cancelTaskDlgt: [_ZoneDelegate],
      _cancelTaskCurrZone: [Circular],
      _hasTaskZS: [Object],
      _hasTaskDlgt: [_ZoneDelegate],
      _hasTaskDlgtOwner: [Circular],
      _hasTaskCurrZone: [Circular]
    }
  },
  task: ZoneTask {
    _zone: Zone {
      _parent: [Zone],
      _name: 'angular',
      _properties: [Object],
      _zoneDelegate: [_ZoneDelegate]
    },
    runCount: 0,
    _zoneDelegates: null,
    _state: 'notScheduled',
    type: 'microTask',
    source: 'Promise.then',
    data: ZoneAwarePromise [Promise] {
      __zone_symbol__state: 0,
      __zone_symbol__value: [HttpErrorResponse]
    },
    scheduleFn: undefined,
    cancelFn: undefined,
    callback: [Function],
    invoke: [Function]
  }
}

我注意到，如果我在路由中删除对解析器的引用，则页面正确呈现（存在与依赖解析器相关的对象渲染相关的明显错误），因此我弄清楚了问题在解析器中。

您是否已经遇到了这个问题和/或知道如何解决此问题？提前致谢。

Answer 1

我最近遇到了完全相同的错误，并能够识别该问题。

当您的Angular SSR应用程序在执行服务器端渲染部分时无法达到API端点时，就会发生错误。不幸的是，错误消息完全误导了。

您的服务器无法达到端点的原因可能有不同的原因，例如，防火墙可能会阻止请求。

如果使用Docker，请确保您的容器可以相互通信并使用正确的端点URL。就我而言，在调用API时使用“ Localhost”引起了此问题，我必须通过内部Docker网络执行服务器端请求。