From 6cb3df6a215d2910372960af7f462f367d40d865 Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Sat, 3 Jul 2021 01:26:49 +0800
Subject: [PATCH] Merge pull request #15410 from
 Marklb/marklb/fix-circular-ref-in-module-metadata

Angular: Fix circular reference not being handled in moduleMetadata
---
 app/angular/package.json                      |  1 +
 .../preview/angular-beta/AbstractRenderer.ts  |  3 ++-
 .../angular-beta/RendererService.test.ts      | 23 +++++++++++++++++++
 .../preview/angular-beta/RendererService.ts   |  3 ++-
 yarn.lock                                     |  1 +
 5 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/app/angular/package.json b/app/angular/package.json
index c5830341fe2d..02c45fa1d181 100644
--- a/app/angular/package.json
+++ b/app/angular/package.json
@@ -65,6 +65,7 @@
     "regenerator-runtime": "^0.13.7",
     "sass-loader": "^10.1.0",
     "strip-json-comments": "3.1.1",
+    "telejson": "^5.3.2",
     "ts-dedent": "^2.0.0",
     "ts-loader": "^8.0.14",
     "tsconfig-paths-webpack-plugin": "^3.3.0",
diff --git a/app/angular/src/client/preview/angular-beta/AbstractRenderer.ts b/app/angular/src/client/preview/angular-beta/AbstractRenderer.ts
index 8260f8856244..8dbaaf5b1c41 100644
--- a/app/angular/src/client/preview/angular-beta/AbstractRenderer.ts
+++ b/app/angular/src/client/preview/angular-beta/AbstractRenderer.ts
@@ -3,6 +3,7 @@ import { enableProdMode, NgModule, PlatformRef } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { BehaviorSubject, Subject } from 'rxjs';
+import { stringify } from 'telejson';
 import { ICollection, StoryFnAngularReturnType } from '../types';
 import { Parameters } from '../types-6-0';
 import { createStorybookModule, getStorybookModuleMetadata } from './StorybookModule';
@@ -160,7 +161,7 @@ export abstract class AbstractRenderer {
 
     const currentStoryRender = {
       storyFnAngular,
-      moduleMetadataSnapshot: JSON.stringify(moduleMetadata),
+      moduleMetadataSnapshot: stringify(moduleMetadata),
     };
 
     this.previousStoryRenderInfo = currentStoryRender;
diff --git a/app/angular/src/client/preview/angular-beta/RendererService.test.ts b/app/angular/src/client/preview/angular-beta/RendererService.test.ts
index 802ac6039382..920eb8f4d001 100644
--- a/app/angular/src/client/preview/angular-beta/RendererService.test.ts
+++ b/app/angular/src/client/preview/angular-beta/RendererService.test.ts
@@ -57,6 +57,29 @@ describe('RendererService', () => {
       );
     });
 
+    it('should handle circular reference in moduleMetadata', async () => {
+      class Thing {
+        token: Thing;
+
+        constructor() {
+          this.token = this;
+        }
+      }
+      const token = new Thing();
+
+      await rendererService.render({
+        storyFnAngular: {
+          template: '🦊',
+          props: {},
+          moduleMetadata: { providers: [{ provide: 'foo', useValue: token }] },
+        },
+        forced: false,
+        parameters: {} as any,
+      });
+
+      expect(document.body.getElementsByTagName('storybook-wrapper')[0].innerHTML).toBe('🦊');
+    });
+
     describe('when forced=true', () => {
       beforeEach(async () => {
         // Init first render
diff --git a/app/angular/src/client/preview/angular-beta/RendererService.ts b/app/angular/src/client/preview/angular-beta/RendererService.ts
index 58144ac66a26..9909cf0f24ae 100644
--- a/app/angular/src/client/preview/angular-beta/RendererService.ts
+++ b/app/angular/src/client/preview/angular-beta/RendererService.ts
@@ -3,6 +3,7 @@ import { enableProdMode, NgModule, PlatformRef } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { BehaviorSubject, Subject } from 'rxjs';
+import { stringify } from 'telejson';
 import { ICollection, StoryFnAngularReturnType } from '../types';
 import { Parameters } from '../types-6-0';
 import { createStorybookModule, getStorybookModuleMetadata } from './StorybookModule';
@@ -154,7 +155,7 @@ export class RendererService {
 
     this.currentStoryRender = {
       storyFnAngular,
-      moduleMetadataSnapshot: JSON.stringify(moduleMetadata),
+      moduleMetadataSnapshot: stringify(moduleMetadata),
     };
 
     if (
diff --git a/yarn.lock b/yarn.lock
index 3d91205306e7..3613f231645e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6150,6 +6150,7 @@ __metadata:
     regenerator-runtime: ^0.13.7
     sass-loader: ^10.1.0
     strip-json-comments: 3.1.1
+    telejson: ^5.3.2
     ts-dedent: ^2.0.0
     ts-jest: ^26.4.4
     ts-loader: ^8.0.14