Angular 通用 - TypeError : Converting circular structure to JSON

Question

我遇到了一个与 Angular 服务器端渲染 (SSR)、解析器的使用和 HTTP 请求相关的大问题。我正在 Angular 13 中构建一个项目，但我决定实现 SSR，以便在 URL 结构发生变化时改善 SEO 和重定向的体验。

我决定通过 ng add @nguniversal/express-engine 安装它，如 documentation 中所报告的那样.不幸的是，当我使用 ng run project: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 网络执行服务器端请求。