首页 > 解决方案 > 忽略 BEFORE_APP_SERIALIZED 异常:TypeError:将循环结构转换为 JSON

问题描述

我有一个 Angular 应用程序,它使用 Angular Universal 进行服务器端渲染,并使用 TransferState 模块将应用程序的状态从服务器传递到客户端。

我在某些页面上收到此警告日志:

Ignoring BEFORE_APP_SERIALIZED Exception:  TypeError: Converting circular structure to JSON
at Object.stringify (<anonymous>)
at TransferState.toJson (/Users/my-user/Documents/MyApp/my-app/dist/server.js:40450:21)
at /Users/my-user/Documents/MyApp/my-app/dist/server.js:1338:122
at /Users/my-user/Documents/MyApp/my-app/dist/server.js:1399:29
at ZoneDelegate.invoke (/Users/my-user/Documents/MyApp/my-app/dist/server.js:167690:26)
at Zone.run (/Users/my-user/Documents/MyApp/my-app/dist/server.js:167449:43)
at /Users/my-user/Documents/MyApp/my-app/dist/server.js:168188:34
at ZoneDelegate.invokeTask (/Users/my-user/Documents/MyApp/my-app/dist/server.js:167722:31)
at Zone.runTask (/Users/my-user/Documents/MyApp/my-app/dist/server.js:167494:47)
at drainMicroTaskQueue (/Users/my-user/Documents/MyApp/my-app/dist/server.js:167900:35)

我不太关心警告本身(虽然我想知道究竟是什么导致了循环引用)但我发现它每次都记录警告真的很烦人,无论环境如何(ergo也在生产中)。

我怎么能 a) 防止错误?b) 防止警告日志?

是日志的来源:

function _render<T>(
    platform: PlatformRef, moduleRefPromise: Promise<NgModuleRef<T>>): Promise<string> {
  return moduleRefPromise.then((moduleRef) => {
    const transitionId = moduleRef.injector.get(ɵTRANSITION_ID, null);
    if (!transitionId) {
      throw new Error(
          `renderModule[Factory]() requires the use of BrowserModule.withServerTransition() to ensure
the server-rendered app can be properly bootstrapped into a client app.`);
    }
    const applicationRef: ApplicationRef = moduleRef.injector.get(ApplicationRef);
    return applicationRef.isStable.pipe((first((isStable: boolean) => isStable)))
        .toPromise()
        .then(() => {
          const platformState = platform.injector.get(PlatformState);

          const asyncPromises: Promise<any>[] = [];

          // Run any BEFORE_APP_SERIALIZED callbacks just before rendering to string.
          const callbacks = moduleRef.injector.get(BEFORE_APP_SERIALIZED, null);
          if (callbacks) {
            for (const callback of callbacks) {
              try {
                const callbackResult = callback();
                if (ɵisPromise(callbackResult)) {
                  asyncPromises.push(callbackResult);
                }

              } catch (e) {
                // Ignore exceptions.
                console.warn('Ignoring BEFORE_APP_SERIALIZED Exception: ', e);
              }
            }
          }

          const complete = () => {
            const output = platformState.renderToString();
            platform.destroy();
            return output;
          };

          if (asyncPromises.length === 0) {
            return complete();
          }

          return Promise
              .all(asyncPromises.map(asyncPromise => {
                return asyncPromise.catch(
                    e => { console.warn('Ignoring BEFORE_APP_SERIALIZED Exception: ', e); });
              }))
              .then(complete);
        });
  });
}

标签: jsonangularserver-side-renderinguniversalangular-transfer-state

解决方案


推荐阅读