TransferState some part of resolved data is not present on client side, though it's present on the server

Question

app.routing.module:

{
  path: '',
  component: IndexComponent,
  resolve: { videos: GetVideosResolver },
},

GetVideosResolver:

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
const VIDEOS_KEY = makeStateKey('videos');

if (this.transferState.hasKey(VIDEOS_KEY)) {
  const videos = this.transferState.get(VIDEOS_KEY, null);
  this.transferState.remove(VIDEOS_KEY);
  return of(videos);
} else {
  return this.http.get(`${environment.api_url}/video/list`).pipe(
    tap((videos: any) => {
      if (isPlatformServer(this.platformId)) {
        this.transferState.set(VIDEOS_KEY, videos);
      }
    }),
    catchError((err) => of())
  );
}

}

console.log(this.route.shapshot.data.videos) prints correct resolved data in my IDE console, though in browser console some crucial object is missing. It seems angular has some kind of restriction on how large of an object you can resolve in one time. How do I bypass that?

Answer 1

Got it working.

this.transferState.set(VIDEOS_KEY, { ...videos });