Angular: Component creation with TestBed API

code/core/src/types/modules/core-common.ts

@@ -448,6 +448,13 @@ export interface StorybookConfigRaw {
      * Set NODE_ENV to development in built Storybooks for better testability and debuggability
      */
     developmentModeForBuild?: boolean;
+
+    /**
+     * Use TestBed to render Angular components in the preview instead of the default renderer. See:
+     * https://github.com/storybookjs/storybook/discussions/31088
+     */
+    previewTestBedRenderer?: boolean;
+
     /** Only show input controls in Angular */
     angularFilterNonInputControls?: boolean;
   };

code/frameworks/angular/package.json

@@ -88,6 +88,7 @@
     "prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
   },
   "dependencies": {
+    "@angular/platform-browser-dynamic": "^20.0.0",
     "@storybook/builder-webpack5": "workspace:*",
     "@storybook/global": "^5.0.0",
     "telejson": "8.0.0",
@@ -97,17 +98,18 @@
   },
   "devDependencies": {
     "@analogjs/vite-plugin-angular": "^1.12.1",
-    "@angular-devkit/architect": "^0.1901.1",
-    "@angular-devkit/build-angular": "^19.1.1",
-    "@angular-devkit/core": "^19.1.1",
-    "@angular/animations": "^19.1.1",
-    "@angular/common": "^19.1.1",
-    "@angular/compiler": "^19.1.1",
-    "@angular/compiler-cli": "^19.1.1",
-    "@angular/core": "^19.1.1",
-    "@angular/forms": "^19.1.1",
-    "@angular/platform-browser": "^19.1.1",
-    "@angular/platform-browser-dynamic": "^19.1.1",
+    "@angular-devkit/architect": "^0.2000.1",
+    "@angular-devkit/build-angular": "^20.0.0",
+    "@angular-devkit/core": "^20.0.0",
+    "@angular/animations": "^20.0.0",
+    "@angular/common": "^20.0.0",
+    "@angular/compiler": "^20.0.0",
+    "@angular/compiler-cli": "^20.0.0",
+    "@angular/core": "^20.0.0",
+    "@angular/forms": "^20.0.0",
+    "@angular/platform-browser": "^20.0.0",
+    "@angular/platform-browser-dynamic": "^20.0.0",
+    "@angular/router": "^20.0.0",
     "@storybook/core-webpack": "workspace:*",
     "@types/node": "^22.0.0",
     "fd-package-json": "^1.2.0",
@@ -130,6 +132,7 @@
     "@angular/forms": ">=18.0.0 < 21.0.0",
     "@angular/platform-browser": ">=18.0.0 < 21.0.0",
     "@angular/platform-browser-dynamic": ">=18.0.0 < 21.0.0",
+    "@angular/router": ">=18.0.0 < 21.0.0",
     "rxjs": "^6.5.3 || ^7.4.0",
     "storybook": "workspace:^",
     "typescript": "^4.9.0 || ^5.0.0",
@@ -142,6 +145,9 @@
     "@angular/cli": {
       "optional": true
     },
+    "@angular/router": {
+      "optional": true
+    },
     "zone.js": {
       "optional": true
     }

code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts

@@ -1,14 +1,15 @@
 import type { ApplicationRef, NgModule } from '@angular/core';
-import { bootstrapApplication } from '@angular/platform-browser';
 import type { Subject } from 'rxjs';
 import { BehaviorSubject } from 'rxjs';
 import { stringify } from 'telejson';
-
 import type { ICollection, StoryFnAngularReturnType } from '../types';
-import { getApplication } from './StorybookModule';
-import { storyPropsProvider } from './StorybookProvider';
-import { queueBootstrapping } from './utils/BootstrapQueue';
 import { PropertyExtractor } from './utils/PropertyExtractor';
+import { TestBedComponentBuilder } from './utils/TestBedComponentBuilder';
+import { queueBootstrapping } from './utils/BootstrapQueue';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { getWrapperComponent } from './TestBedWrapperComponent';
+import { storyPropsProvider } from './StorybookProvider';
+import { getApplication } from './StorybookModule';
 import { getProvideZonelessChangeDetectionFn } from './utils/Zoneless';
 
 type StoryRenderInfo = {
@@ -23,7 +24,6 @@ declare global {
 }
 
 const applicationRefs = new Map<HTMLElement, ApplicationRef>();
-
 /**
  * Attribute name for the story UID that may be written to the targetDOMNode.
  *
@@ -73,8 +73,6 @@ export abstract class AbstractRenderer {
     component?: any;
     targetDOMNode: HTMLElement;
   }) {
-    const targetSelector = this.generateTargetSelectorFromStoryId(targetDOMNode.id);
-
     const newStoryProps$ = new BehaviorSubject<ICollection>(storyFnAngular.props);
 
     if (
@@ -92,14 +90,90 @@ export abstract class AbstractRenderer {
       return;
     }
 
-    await this.beforeFullRender(targetDOMNode);
+    const { environmentProviders, componentSelector, analyzedMetadata } =
+      await this.prepareMetaData(storyFnAngular, targetDOMNode, component);
+    environmentProviders.push(storyPropsProvider(newStoryProps$));
 
     // Complete last BehaviorSubject and set a new one for the current module
     if (this.storyProps$) {
       this.storyProps$.complete();
     }
     this.storyProps$ = newStoryProps$;
 
+    const application = getApplication({
+      storyFnAngular,
+      component,
+      targetSelector: componentSelector,
+      analyzedMetadata,
+    });
+
+    const applicationRef = await queueBootstrapping(() => {
+      return bootstrapApplication(application, {
+        ...storyFnAngular.applicationConfig,
+        providers: environmentProviders,
+      });
+    });
+
+    this.setApplicationRef(targetDOMNode, applicationRef);
+  }
+
+  /**
+   * Bootstrap main angular module with main component with testbed api
+   *
+   * @param storyFnAngular {StoryFnAngularReturnType}
+   * @param forced {boolean}
+   * @param component {Component}
+   */
+  public async renderWithTestBed({
+    storyFnAngular,
+    component,
+    targetDOMNode,
+  }: {
+    storyFnAngular: StoryFnAngularReturnType;
+    component?: any;
+    targetDOMNode: HTMLElement;
+  }) {
+    const { environmentProviders, componentSelector, analyzedMetadata } =
+      await this.prepareMetaData(storyFnAngular, targetDOMNode, component);
+
+    if (storyFnAngular.userDefinedTemplate) {
+      component = getWrapperComponent(storyFnAngular.template);
+    }
+
+    const componentBuilder = await new TestBedComponentBuilder()
+      .setComponent(component)
+      .setSelector(componentSelector)
+      .setStoryFn(storyFnAngular)
+      .setMetaData(analyzedMetadata)
+      .setTargetNode(targetDOMNode)
+      .setEnvironmentProviders(environmentProviders)
+      .configure();
+
+    try {
+      const { Router } = await import('@angular/router');
+      await componentBuilder.initRouter(Router).compileComponents();
+    } catch (e) {
+      await componentBuilder.compileComponents();
+    }
+
+    componentBuilder.copyComponentIntoTargetNode();
+
+    this.setApplicationRef(targetDOMNode, componentBuilder.getApplicationRef());
+  }
+
+  public setApplicationRef(targetDOMNode: HTMLElement, applicationRef: ApplicationRef) {
+    applicationRefs.set(targetDOMNode, applicationRef);
+  }
+
+  private async prepareMetaData(
+    storyFnAngular: StoryFnAngularReturnType,
+    targetDOMNode: HTMLElement,
+    component?: any
+  ) {
+    const targetSelector = this.generateTargetSelectorFromStoryId(targetDOMNode.id);
+
+    await this.beforeFullRender();
+
     this.initAngularRootElement(targetDOMNode, targetSelector);
 
     const analyzedMetadata = new PropertyExtractor(storyFnAngular.moduleMetadata, component);
@@ -114,15 +188,7 @@ export abstract class AbstractRenderer {
       element.toggleAttribute(storyUid, true);
     }
 
-    const application = getApplication({
-      storyFnAngular,
-      component,
-      targetSelector: componentSelector,
-      analyzedMetadata,
-    });
-
-    const providers = [
-      storyPropsProvider(newStoryProps$),
+    const environmentProviders = [
       ...analyzedMetadata.applicationProviders,
       ...(storyFnAngular.applicationConfig?.providers ?? []),
     ];
@@ -133,18 +199,15 @@ export abstract class AbstractRenderer {
       if (!provideZonelessChangeDetectionFn) {
         throw new Error('Zoneless change detection requires Angular 18 or higher');
       } else {
-        providers.unshift(provideZonelessChangeDetectionFn());
+        environmentProviders.unshift(provideZonelessChangeDetectionFn());
       }
     }
 
-    const applicationRef = await queueBootstrapping(() => {
-      return bootstrapApplication(application, {
-        ...storyFnAngular.applicationConfig,
-        providers,
-      });
-    });
-
-    applicationRefs.set(targetDOMNode, applicationRef);
+    return {
+      environmentProviders,
+      componentSelector,
+      analyzedMetadata,
+    };
   }
 
   /**
@@ -205,7 +268,6 @@ export abstract class AbstractRenderer {
     forced: boolean;
   }) {
     const previousStoryRenderInfo = this.previousStoryRenderInfo.get(targetDOMNode);
-
     const currentStoryRender = {
       storyFnAngular,
       moduleMetadataSnapshot: stringify(moduleMetadata, { maxDepth: 50 }),

code/frameworks/angular/src/client/angular-beta/RendererFactory.test.ts

@@ -40,12 +40,12 @@ describe('RendererFactory', () => {
 
   describe('CanvasRenderer', () => {
     it('should get CanvasRenderer instance', async () => {
-      const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
+      const render = await rendererFactory.getRendererInstance(rootTargetDOMNode, false);
       expect(render).toBeInstanceOf(CanvasRenderer);
     });
 
     it('should render my-story for story template', async () => {
-      const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
+      const render = await rendererFactory.getRendererInstance(rootTargetDOMNode, false);
       await render?.render({
         storyFnAngular: {
           template: '🦊',
@@ -62,7 +62,7 @@ describe('RendererFactory', () => {
       @Component({ selector: 'foo', template: '🦊' })
       class FooComponent {}
 
-      const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
+      const render = await rendererFactory.getRendererInstance(rootTargetDOMNode, false);
       await render?.render({
         storyFnAngular: {
           props: {},
@@ -87,7 +87,7 @@ describe('RendererFactory', () => {
       }
       const token = new Thing();
 
-      const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
+      const render = await rendererFactory.getRendererInstance(rootTargetDOMNode, false);
 
       await render?.render({
         storyFnAngular: {
@@ -105,7 +105,7 @@ describe('RendererFactory', () => {
     describe('when forced=true', () => {
       beforeEach(async () => {
         // Init first render
-        const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
+        const render = await rendererFactory.getRendererInstance(rootTargetDOMNode, false);
         await render?.render({
           storyFnAngular: {
             template: '{{ logo }}: {{ name }}',
@@ -125,7 +125,7 @@ describe('RendererFactory', () => {
 
       it('should not be re-rendered when only props change', async () => {
         // only props change
-        const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
+        const render = await rendererFactory.getRendererInstance(rootTargetDOMNode, false);
         await render?.render({
           storyFnAngular: {
             props: {
@@ -140,7 +140,7 @@ describe('RendererFactory', () => {
       });
 
       it('should be re-rendered when template change', async () => {
-        const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
+        const render = await rendererFactory.getRendererInstance(rootTargetDOMNode, false);
         await render?.render({
           storyFnAngular: {
             template: '{{ beer }}',
@@ -161,7 +161,7 @@ describe('RendererFactory', () => {
     describe('when canvas render is done before', () => {
       beforeEach(async () => {
         // Init first Canvas render
-        const render = await rendererFactory.getRendererInstance(rootTargetDOMNode);
+        const render = await rendererFactory.getRendererInstance(rootTargetDOMNode, false);
         await render?.render({
           storyFnAngular: {
             template: 'Canvas 🖼',
@@ -177,13 +177,13 @@ describe('RendererFactory', () => {
           .appendChild(global.document.createElement('👾'));
 
         expect(global.document.getElementById('storybook-root').innerHTML).toContain('Canvas 🖼');
-        await rendererFactory.getRendererInstance(rootDocstargetDOMNode);
+        await rendererFactory.getRendererInstance(rootDocstargetDOMNode, false);
         expect(global.document.getElementById('storybook-root').innerHTML).toBe('');
       });
     });
 
     it('should get DocsRenderer instance', async () => {
-      const render = await rendererFactory.getRendererInstance(rootDocstargetDOMNode);
+      const render = await rendererFactory.getRendererInstance(rootDocstargetDOMNode, false);
       expect(render).toBeInstanceOf(DocsRenderer);
     });
 
@@ -193,7 +193,8 @@ describe('RendererFactory', () => {
         class FooComponent {}
 
         const render = await rendererFactory.getRendererInstance(
-          global.document.getElementById('storybook-docs')
+          global.document.getElementById('storybook-docs'),
+          false
         );
 
         const targetDOMNode1 = global.document.createElement('div');
@@ -223,7 +224,7 @@ describe('RendererFactory', () => {
         expect(global.document.querySelectorAll('#story-1 > story-1')[0].innerHTML).toBe(
           '<foo>🦊</foo><!--container-->'
         );
-        expect(global.document.querySelectorAll('#story-1 > story-1')[1].innerHTML).toBe(
+        expect(global.document.querySelectorAll('#story-1 > story-1')[0].innerHTML).toBe(
           '<foo>🦊</foo><!--container-->'
         );
       });
@@ -235,7 +236,8 @@ describe('RendererFactory', () => {
         class FooComponent {}
 
         const render = await rendererFactory.getRendererInstance(
-          global.document.getElementById('storybook-docs')
+          global.document.getElementById('storybook-docs'),
+          false
         );
 
         const targetDOMNode1 = global.document.createElement('div');