Angular transfer state implicitly include component state - when I explicitly only provide it page data?

Question

I am currently trying to work out an issue I currently have with transferState, and that it tries to serilize app component, when what I provide it is the json data provided from the backend.

    this._httpClient
        .get(fullUrl)
        .pipe(
            catchError((errorResponse: HttpErrorResponse) => {
                  console.error(
                    `getPage() failed. fullUrl=${fullUrl} | errorStatusText=${this.errorStatusText}`
                );

                return of([]);
            })
        )
        .subscribe((resp) => {
            if (this._isServerSide) {
                this._transferState.set(stateKey, resp);
            }
            
            this.page.next(resp);
        });

No where in the code is the app component being serilized to json expliclty by me - From a bit of debugging I understand that this method is the culprit.

/**
 * @license
 * Copyright Google LLC All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.io/license
 */
const TRANSFER_STATE_SERIALIZATION_PROVIDERS = [{
  provide: BEFORE_APP_SERIALIZED,
  useFactory: serializeTransferStateFactory,
  deps: [_angular_common__WEBPACK_IMPORTED_MODULE_5__.DOCUMENT, _angular_core__WEBPACK_IMPORTED_MODULE_6__.APP_ID, _angular_platform_browser__WEBPACK_IMPORTED_MODULE_4__.TransferState],
  multi: true
}];
function serializeTransferStateFactory(doc, appId, transferStore) {
  return () => {
    // The `.toJSON` here causes the `onSerialize` callbacks to be called.
    // These callbacks can be used to provide the value for a given key.
    const content = transferStore.toJson();
    if (transferStore.isEmpty) {
      // The state is empty, nothing to transfer,
      // avoid creating an extra `<script>` tag in this case.
      return;
    }
    const script = doc.createElement('script');
    script.id = appId + '-state';
    script.setAttribute('type', 'application/json');
    script.textContent = (0,_angular_platform_browser__WEBPACK_IMPORTED_MODULE_4__["ɵescapeHtml"])(content);
    doc.body.appendChild(script);
  };
}

What is the content of transferStore? I explictly set is the pagedata I receive from the backend but when i somehow call toJson, it somehow tries to convert the app component - my angular form component.

This causes problem, as one of my component has a circular reference in it - angular form, and there does seem to be an easy way to solve this issue as it seem to be by design.

Angular transfer state implicitly include component state - when I explicitly only provide it page data?

0 Answers0