diff --git a/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts b/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts index 029de1cd02e6..d9408c0c4de4 100644 --- a/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts +++ b/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts @@ -1,4 +1,4 @@ -import { ApplicationRef, enableProdMode, importProvidersFrom, NgModule } from '@angular/core'; +import { ApplicationRef, enableProdMode, NgModule } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import { BehaviorSubject, Subject } from 'rxjs'; @@ -14,16 +14,16 @@ type StoryRenderInfo = { moduleMetadataSnapshot: string; }; -const applicationRefs = new Set(); +const applicationRefs = new Map(); export abstract class AbstractRenderer { /** * Wait and destroy the platform */ - public static resetApplications() { + public static resetApplications(domNode?: HTMLElement) { componentNgModules.clear(); - applicationRefs.forEach((appRef) => { - if (!appRef.destroyed) { + applicationRefs.forEach((appRef, appDOMNode) => { + if (!appRef.destroyed && (!domNode || appDOMNode === domNode)) { appRef.destroy(); } }); @@ -50,7 +50,7 @@ export abstract class AbstractRenderer { } }; - protected previousStoryRenderInfo: StoryRenderInfo; + protected previousStoryRenderInfo = new Map(); // Observable to change the properties dynamically without reloading angular module&component protected storyProps$: Subject; @@ -67,7 +67,7 @@ export abstract class AbstractRenderer { } } - protected abstract beforeFullRender(): Promise; + protected abstract beforeFullRender(domNode?: HTMLElement): Promise; protected abstract afterFullRender(): Promise; @@ -100,6 +100,7 @@ export abstract class AbstractRenderer { if ( !this.fullRendererRequired({ + targetDOMNode, storyFnAngular, moduleMetadata: { ...storyFnAngular.moduleMetadata, @@ -112,7 +113,7 @@ export abstract class AbstractRenderer { return; } - await this.beforeFullRender(); + await this.beforeFullRender(targetDOMNode); // Complete last BehaviorSubject and set a new one for the current module if (this.storyProps$) { @@ -140,7 +141,7 @@ export abstract class AbstractRenderer { ], }); - applicationRefs.add(applicationRef); + applicationRefs.set(targetDOMNode, applicationRef); await this.afterFullRender(); } @@ -171,26 +172,28 @@ export abstract class AbstractRenderer { } private fullRendererRequired({ + targetDOMNode, storyFnAngular, moduleMetadata, forced, }: { + targetDOMNode: HTMLElement; storyFnAngular: StoryFnAngularReturnType; moduleMetadata: NgModule; forced: boolean; }) { - const { previousStoryRenderInfo } = this; + const previousStoryRenderInfo = this.previousStoryRenderInfo.get(targetDOMNode); const currentStoryRender = { storyFnAngular, moduleMetadataSnapshot: stringify(moduleMetadata), }; - this.previousStoryRenderInfo = currentStoryRender; + this.previousStoryRenderInfo.set(targetDOMNode, currentStoryRender); if ( // check `forceRender` of story RenderContext - !forced || + forced || // if it's the first rendering and storyProps$ is not init !this.storyProps$ ) { diff --git a/code/frameworks/angular/src/client/angular-beta/DocsRenderer.ts b/code/frameworks/angular/src/client/angular-beta/DocsRenderer.ts index 945881088b82..d51573376fcb 100644 --- a/code/frameworks/angular/src/client/angular-beta/DocsRenderer.ts +++ b/code/frameworks/angular/src/client/angular-beta/DocsRenderer.ts @@ -38,8 +38,8 @@ export class DocsRenderer extends AbstractRenderer { await super.render({ ...options, forced: false }); } - async beforeFullRender(): Promise { - DocsRenderer.resetApplications(); + async beforeFullRender(domNode?: HTMLElement): Promise { + DocsRenderer.resetApplications(domNode); } async afterFullRender(): Promise {