@storybook/angular 7.0.0-beta.6 → 7.0.0-beta.61

package/README.md

@@ -1,5 +1,11 @@
 # Storybook for Angular
 
+- [Storybook for Angular](#storybook-for-angular)
+  - [Getting Started](#getting-started)
+    - [Setup Compodoc](#setup-compodoc)
+  - [Support for multi-project workspace](#support-for-multi-project-workspace)
+  - [Run Storybook](#run-storybook)
+
 Storybook for Angular is a UI development environment for your Angular components.
 With it, you can visualize different states of your UI components and develop them interactively.
 
@@ -15,6 +21,66 @@ cd my-angular-app
 npx storybook init
 ```
 
+### Setup Compodoc
+
+When installing, you will be given the option to set up Compodoc, which is a tool for creating documentation for Angular projects.
+
+You can include JSDoc comments above components, directives, and other parts of your Angular code to include documentation for those elements. Compodoc uses these comments to generate documentation for your application. In Storybook, it is useful to add explanatory comments above @Inputs and @Outputs, since these are the main elements that Storybook displays in its user interface. The @Inputs and @Outputs are the elements that you can interact with in Storybook, such as controls.
+
+## Support for multi-project workspace
+
+Storybook supports Angular multi-project workspace. You can setup Storybook for each project in the workspace. When running `npx storybook init` you will be asked for which project Storybook should be set up. Essentially, during initialization, the `angular.json` will be edited to add the Storybook configuration for the selected project. The configuration looks approximately like this:
+
+```json
+// angular.json
+{
+  ...
+  "projects": {
+    ...
+    "your-project": {
+      ...
+      "architect": {
+        ...
+        "storybook": {
+          "builder": "@storybook/angular:start-storybook",
+          "options": {
+            "configDir": ".storybook",
+            "browserTarget": "your-project:build",
+            "compodoc": false,
+            "port": 6006
+          }
+        },
+        "build-storybook": {
+          "builder": "@storybook/angular:build-storybook",
+          "options": {
+            "configDir": ".storybook",
+            "browserTarget": "your-project:build",
+            "compodoc": false,
+            "outputDir": "dist/storybook/your-project"
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+## Run Storybook
+
+To run Storybook for a particular project, please run:
+
+```sh
+ng run your-project:storybook
+```
+
+To build Storybook, run:
+
+```sh
+ng run your-project:build-storybook
+```
+
+You will find the output in `dist/storybook/your-project`.
+
 For more information visit: [storybook.js.org](https://storybook.js.org)
 
 ---

package/dist/builders/build-storybook/index.d.ts

@@ -1,15 +1,17 @@
 import { BuilderOutput } from '@angular-devkit/architect';
 import { JsonObject } from '@angular-devkit/core';
 import { CLIOptions } from '@storybook/types';
-import { ExtraEntryPoint, StylePreprocessorOptions } from '@angular-devkit/build-angular';
+import { StylePreprocessorOptions } from '@angular-devkit/build-angular';
+import { StyleElement } from '@angular-devkit/build-angular/src/builders/browser/schema';
 export type StorybookBuilderOptions = JsonObject & {
     browserTarget?: string | null;
     tsConfig?: string;
+    docs: boolean;
     compodoc: boolean;
     compodocArgs: string[];
-    styles?: ExtraEntryPoint[];
+    styles?: StyleElement[];
     stylePreprocessorOptions?: StylePreprocessorOptions;
-} & Pick<CLIOptions, 'outputDir' | 'configDir' | 'loglevel' | 'quiet' | 'docs' | 'webpackStatsJson'>;
+} & Pick<CLIOptions, 'outputDir' | 'configDir' | 'loglevel' | 'quiet' | 'webpackStatsJson' | 'disableTelemetry'>;
 export type StorybookBuilderOutput = JsonObject & BuilderOutput & {};
 declare const _default: import("@angular-devkit/architect/src/internal").Builder<any>;
 export default _default;

package/dist/builders/build-storybook/index.js

@@ -16,14 +16,15 @@ function commandBuilder(options, context) {
             : (0, rxjs_1.of)({});
         return runCompodoc$.pipe((0, operators_1.mapTo)({ tsConfig }));
     }), (0, operators_1.map)(({ tsConfig }) => {
-        const { browserTarget, stylePreprocessorOptions, styles, configDir, docs, loglevel, outputDir, quiet, webpackStatsJson, } = options;
+        const { browserTarget, stylePreprocessorOptions, styles, configDir, docs, loglevel, outputDir, quiet, webpackStatsJson, disableTelemetry, } = options;
         const standaloneOptions = {
             packageJson: (0, read_pkg_up_1.sync)({ cwd: __dirname }).packageJson,
             configDir,
-            docs,
+            ...(docs ? { docs } : {}),
             loglevel,
             outputDir,
             quiet,
+            disableTelemetry,
             angularBrowserTarget: browserTarget,
             angularBuilderContext: context,
             angularBuilderOptions: {
@@ -52,5 +53,8 @@ async function setup(options, context) {
     };
 }
 function runInstance(options) {
-    return (0, rxjs_1.from)((0, core_server_1.buildStaticStandalone)(options)).pipe((0, operators_1.catchError)((error) => (0, rxjs_1.throwError)((0, build_standalone_errors_handler_1.buildStandaloneErrorHandler)(error))));
+    return (0, rxjs_1.from)((0, core_server_1.withTelemetry)('build', {
+        cliOptions: options,
+        presetOptions: { ...options, corePresets: [], overridePresets: [] },
+    }, () => (0, core_server_1.buildStaticStandalone)(options))).pipe((0, operators_1.catchError)((error) => (0, rxjs_1.throwError)((0, build_standalone_errors_handler_1.buildStandaloneErrorHandler)(error))));
 }

package/dist/builders/build-storybook/schema.json

@@ -34,7 +34,7 @@
             "description": "Suppress verbose build output.",
             "default": false
         },
-        "docsMode": {
+        "docs": {
             "type": "boolean",
             "description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/react/writing-docs/build-documentation#preview-storybooks-documentation.",
             "default": false
@@ -47,13 +47,19 @@
         "compodocArgs": {
             "type": "array",
             "description": "Compodoc options : https://compodoc.app/guides/options.html. Options `-p` with tsconfig path and `-d` with workspace root is always given.",
-            "default": ["-e", "json"],
+            "default": [
+                "-e",
+                "json"
+            ],
             "items": {
                 "type": "string"
             }
         },
         "webpackStatsJson": {
-            "type": "boolean",
+            "type": [
+                "boolean",
+                "string"
+            ],
             "description": "Write Webpack Stats JSON to disk",
             "default": false
         },
@@ -61,7 +67,7 @@
             "type": "array",
             "description": "Global styles to be included in the build.",
             "items": {
-                "$ref": "#/definitions/extraEntryPoint"
+                "$ref": "#/definitions/styleElement"
             },
             "default": ""
         },
@@ -83,7 +89,7 @@
     },
     "additionalProperties": false,
     "definitions": {
-        "extraEntryPoint": {
+        "styleElement": {
             "oneOf": [
                 {
                     "type": "object",
@@ -104,7 +110,9 @@
                         }
                     },
                     "additionalProperties": false,
-                    "required": ["input"]
+                    "required": [
+                        "input"
+                    ]
                 },
                 {
                     "type": "string",

package/dist/builders/start-storybook/index.d.ts

@@ -1,15 +1,17 @@
 import { BuilderOutput } from '@angular-devkit/architect';
 import { JsonObject } from '@angular-devkit/core';
-import { ExtraEntryPoint, StylePreprocessorOptions } from '@angular-devkit/build-angular';
+import { StylePreprocessorOptions } from '@angular-devkit/build-angular';
 import { CLIOptions } from '@storybook/types';
+import { StyleElement } from '@angular-devkit/build-angular/src/builders/browser/schema';
 export type StorybookBuilderOptions = JsonObject & {
     browserTarget?: string | null;
     tsConfig?: string;
+    docs: boolean;
     compodoc: boolean;
     compodocArgs: string[];
-    styles?: ExtraEntryPoint[];
+    styles?: StyleElement[];
     stylePreprocessorOptions?: StylePreprocessorOptions;
-} & Pick<CLIOptions, 'port' | 'host' | 'configDir' | 'https' | 'sslCa' | 'sslCert' | 'sslKey' | 'smokeTest' | 'ci' | 'quiet' | 'docs'>;
+} & Pick<CLIOptions, 'port' | 'host' | 'configDir' | 'https' | 'sslCa' | 'sslCert' | 'sslKey' | 'smokeTest' | 'ci' | 'quiet' | 'disableTelemetry'>;
 export type StorybookBuilderOutput = JsonObject & BuilderOutput & {};
 declare const _default: import("@angular-devkit/architect/src/internal").Builder<any>;
 export default _default;

package/dist/builders/start-storybook/index.js

@@ -16,12 +16,12 @@ function commandBuilder(options, context) {
             : (0, rxjs_1.of)({});
         return runCompodoc$.pipe((0, operators_1.mapTo)({ tsConfig }));
     }), (0, operators_1.map)(({ tsConfig }) => {
-        const { browserTarget, stylePreprocessorOptions, styles, ci, configDir, docs, host, https, port, quiet, smokeTest, sslCa, sslCert, sslKey, } = options;
+        const { browserTarget, stylePreprocessorOptions, styles, ci, configDir, docs, host, https, port, quiet, smokeTest, sslCa, sslCert, sslKey, disableTelemetry, } = options;
         const standaloneOptions = {
             packageJson: (0, read_pkg_up_1.sync)({ cwd: __dirname }).packageJson,
             ci,
             configDir,
-            docs,
+            ...(docs ? { docs } : {}),
             host,
             https,
             port,
@@ -30,6 +30,7 @@ function commandBuilder(options, context) {
             sslCa,
             sslCert,
             sslKey,
+            disableTelemetry,
             angularBrowserTarget: browserTarget,
             angularBuilderContext: context,
             angularBuilderOptions: {
@@ -39,8 +40,8 @@ function commandBuilder(options, context) {
             tsConfig,
         };
         return standaloneOptions;
-    }), (0, operators_1.switchMap)((standaloneOptions) => runInstance(standaloneOptions)), (0, operators_1.map)(() => {
-        return { success: true };
+    }), (0, operators_1.switchMap)((standaloneOptions) => runInstance(standaloneOptions)), (0, operators_1.map)((port) => {
+        return { success: true, info: { port } };
     }));
 }
 async function setup(options, context) {
@@ -59,6 +60,9 @@ async function setup(options, context) {
 function runInstance(options) {
     return new rxjs_1.Observable((observer) => {
         // This Observable intentionally never complete, leaving the process running ;)
-        (0, core_server_1.buildDevStandalone)(options).then(() => observer.next(), (error) => observer.error((0, build_standalone_errors_handler_1.buildStandaloneErrorHandler)(error)));
+        (0, core_server_1.withTelemetry)('dev', {
+            cliOptions: options,
+            presetOptions: { ...options, corePresets: [], overridePresets: [] },
+        }, () => (0, core_server_1.buildDevStandalone)(options).then(({ port }) => observer.next(port), (error) => observer.error((0, build_standalone_errors_handler_1.buildStandaloneErrorHandler)(error))));
     });
 }

package/dist/builders/start-storybook/schema.json

@@ -61,7 +61,7 @@
             "description": "Suppress verbose build output.",
             "default": false
         },
-        "docsMode": {
+        "docs": {
             "type": "boolean",
             "description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/react/writing-docs/build-documentation#preview-storybooks-documentation.",
             "default": false
@@ -74,7 +74,10 @@
         "compodocArgs": {
             "type": "array",
             "description": "Compodoc options : https://compodoc.app/guides/options.html. Options `-p` with tsconfig path and `-d` with workspace root is always given.",
-            "default": ["-e", "json"],
+            "default": [
+                "-e",
+                "json"
+            ],
             "items": {
                 "type": "string"
             }
@@ -83,7 +86,7 @@
             "type": "array",
             "description": "Global styles to be included in the build.",
             "items": {
-                "$ref": "#/definitions/extraEntryPoint"
+                "$ref": "#/definitions/styleElement"
             },
             "default": ""
         },
@@ -105,7 +108,7 @@
     },
     "additionalProperties": false,
     "definitions": {
-        "extraEntryPoint": {
+        "styleElement": {
             "oneOf": [
                 {
                     "type": "object",
@@ -126,7 +129,9 @@
                         }
                     },
                     "additionalProperties": false,
-                    "required": ["input"]
+                    "required": [
+                        "input"
+                    ]
                 },
                 {
                     "type": "string",

package/dist/builders/utils/run-compodoc.js

@@ -24,10 +24,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.runCompodoc = void 0;
-const child_process_1 = require("child_process");
 const rxjs_1 = require("rxjs");
 const path = __importStar(require("path"));
+const cli_1 = require("@storybook/cli");
 const hasTsConfigArg = (args) => args.indexOf('-p') !== -1;
+const hasOutputArg = (args) => args.indexOf('-d') !== -1 || args.indexOf('--output') !== -1;
 // path.relative is necessary to workaround a compodoc issue with
 // absolute paths on windows machines
 const toRelativePath = (pathToTsConfig) => {
@@ -37,37 +38,20 @@ const runCompodoc = ({ compodocArgs, tsconfig }, context) => {
     return new rxjs_1.Observable((observer) => {
         const tsConfigPath = toRelativePath(tsconfig);
         const finalCompodocArgs = [
-            'compodoc',
-            // Default options
             ...(hasTsConfigArg(compodocArgs) ? [] : ['-p', tsConfigPath]),
-            '-d',
-            `${context.workspaceRoot}`,
+            ...(hasOutputArg(compodocArgs) ? [] : ['-d', `${context.workspaceRoot || '.'}`]),
             ...compodocArgs,
         ];
+        const packageManager = cli_1.JsPackageManagerFactory.getPackageManager();
         try {
-            context.logger.info(finalCompodocArgs.join(' '));
-            const child = (0, child_process_1.spawn)('npx', finalCompodocArgs, {
-                cwd: context.workspaceRoot,
-                shell: true,
-            });
-            child.stdout.on('data', (data) => {
-                context.logger.info(data.toString());
-            });
-            child.stderr.on('data', (data) => {
-                context.logger.error(data.toString());
-            });
-            child.on('close', (code) => {
-                if (code === 0) {
-                    observer.next();
-                    observer.complete();
-                }
-                else {
-                    observer.error();
-                }
-            });
+            const stdout = packageManager.runPackageCommand('compodoc', finalCompodocArgs, context.workspaceRoot);
+            context.logger.info(stdout);
+            observer.next();
+            observer.complete();
         }
-        catch (error) {
-            observer.error(error);
+        catch (e) {
+            context.logger.error(e);
+            observer.error();
         }
     });
 };

package/dist/builders/utils/run-compodoc.spec.js

@@ -56,4 +56,46 @@ describe('runCompodoc', () => {
             shell: true,
         });
     });
+    it('should run compodoc with default output folder.', async () => {
+        runCompodoc({
+            compodocArgs: [],
+            tsconfig: 'path/to/tsconfig.json',
+        }, {
+            workspaceRoot: 'path/to/project',
+            logger: builderContextLoggerMock,
+        })
+            .pipe((0, operators_1.take)(1))
+            .subscribe();
+        expect(cpSpawnMock.spawn).toHaveBeenCalledWith('npx', ['compodoc', '-p', 'path/to/tsconfig.json', '-d', 'path/to/project'], {
+            cwd: 'path/to/project',
+        });
+    });
+    it('should run with custom output folder specified with --output compodocArgs', async () => {
+        runCompodoc({
+            compodocArgs: ['--output', 'path/to/customFolder'],
+            tsconfig: 'path/to/tsconfig.json',
+        }, {
+            workspaceRoot: 'path/to/project',
+            logger: builderContextLoggerMock,
+        })
+            .pipe((0, operators_1.take)(1))
+            .subscribe();
+        expect(cpSpawnMock.spawn).toHaveBeenCalledWith('npx', ['compodoc', '-p', 'path/to/tsconfig.json', '--output', 'path/to/customFolder'], {
+            cwd: 'path/to/project',
+        });
+    });
+    it('should run with custom output folder specified with -d compodocArgs', async () => {
+        runCompodoc({
+            compodocArgs: ['-d', 'path/to/customFolder'],
+            tsconfig: 'path/to/tsconfig.json',
+        }, {
+            workspaceRoot: 'path/to/project',
+            logger: builderContextLoggerMock,
+        })
+            .pipe((0, operators_1.take)(1))
+            .subscribe();
+        expect(cpSpawnMock.spawn).toHaveBeenCalledWith('npx', ['compodoc', '-p', 'path/to/tsconfig.json', '-d', 'path/to/customFolder'], {
+            cwd: 'path/to/project',
+        });
+    });
 });

package/dist/builders/utils/standalone-options.d.ts

@@ -1,6 +1,6 @@
 import { BuilderContext } from '@angular-devkit/architect';
 import { LoadOptions, CLIOptions, BuilderOptions } from '@storybook/types';
-export type StandaloneOptions = Partial<CLIOptions & LoadOptions & BuilderOptions & {
+export type StandaloneOptions = CLIOptions & LoadOptions & BuilderOptions & {
     mode?: 'static' | 'dev';
     angularBrowserTarget?: string | null;
     angularBuilderOptions?: Record<string, any> & {
@@ -9,4 +9,4 @@ export type StandaloneOptions = Partial<CLIOptions & LoadOptions & BuilderOption
     };
     angularBuilderContext?: BuilderContext | null;
     tsConfig?: string;
-}>;
+};

package/dist/client/angular-beta/AbstractRenderer.d.ts

@@ -1,5 +1,5 @@
 import { Subject } from 'rxjs';
-import { ICollection, StoryFnAngularReturnType, Parameters } from '../types';
+import { ICollection, Parameters, StoryFnAngularReturnType } from '../types';
 type StoryRenderInfo = {
     storyFnAngular: StoryFnAngularReturnType;
     moduleMetadataSnapshot: string;
@@ -9,7 +9,7 @@ export declare abstract class AbstractRenderer {
     /**
      * Wait and destroy the platform
      */
-    static resetPlatformBrowserDynamic(): Promise<void>;
+    static resetApplications(): void;
     /**
      * Reset compiled components because we often want to compile the same component with
      * more than one NgModule.
@@ -49,7 +49,7 @@ export declare abstract class AbstractRenderer {
      * @protected
      * @memberof AbstractRenderer
      */
-    protected generateTargetSelectorFromStoryId(): string;
+    protected generateTargetSelectorFromStoryId(id: string): string;
     protected initAngularRootElement(targetDOMNode: HTMLElement, targetSelector: string): void;
     private fullRendererRequired;
 }

package/dist/client/angular-beta/AbstractRenderer.js

@@ -26,36 +26,24 @@ var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AbstractRenderer = void 0;
 const core_1 = require("@angular/core");
-const platform_browser_dynamic_1 = require("@angular/platform-browser-dynamic");
+const platform_browser_1 = require("@angular/platform-browser");
 const rxjs_1 = require("rxjs");
 const telejson_1 = require("telejson");
 const StorybookModule_1 = require("./StorybookModule");
-// platform must be init only if render is called at least once
-let platformRef;
-function getPlatform(newPlatform) {
-    if (!platformRef || newPlatform) {
-        platformRef = (0, platform_browser_dynamic_1.platformBrowserDynamic)();
-    }
-    return platformRef;
-}
+const StorybookProvider_1 = require("./StorybookProvider");
+const StorybookWrapperComponent_1 = require("./StorybookWrapperComponent");
+const PropertyExtractor_1 = require("./utils/PropertyExtractor");
+const applicationRefs = new Set();
 class AbstractRenderer {
     /**
      * Wait and destroy the platform
      */
-    static resetPlatformBrowserDynamic() {
-        return new Promise((resolve) => {
-            if (platformRef && !platformRef.destroyed) {
-                platformRef.onDestroy(async () => {
-                    resolve();
-                });
-                // Destroys the current Angular platform and all Angular applications on the page.
-                // So call each angular ngOnDestroy and avoid memory leaks
-                platformRef.destroy();
-                return;
+    static resetApplications() {
+        StorybookWrapperComponent_1.componentNgModules.clear();
+        applicationRefs.forEach((appRef) => {
+            if (!appRef.destroyed) {
+                appRef.destroy();
             }
-            resolve();
-        }).then(() => {
-            getPlatform(true);
         });
     }
     constructor(storyId) {
@@ -82,12 +70,13 @@ class AbstractRenderer {
      * @param parameters {Parameters}
      */
     async render({ storyFnAngular, forced, parameters, component, targetDOMNode, }) {
-        const targetSelector = `${this.generateTargetSelectorFromStoryId()}`;
+        const targetSelector = this.generateTargetSelectorFromStoryId(targetDOMNode.id);
         const newStoryProps$ = new rxjs_1.BehaviorSubject(storyFnAngular.props);
-        const moduleMetadata = (0, StorybookModule_1.getStorybookModuleMetadata)({ storyFnAngular, component, targetSelector }, newStoryProps$);
         if (!this.fullRendererRequired({
             storyFnAngular,
-            moduleMetadata,
+            moduleMetadata: {
+                ...storyFnAngular.moduleMetadata,
+            },
             forced,
         })) {
             this.storyProps$.next(storyFnAngular.props);
@@ -100,7 +89,20 @@ class AbstractRenderer {
         }
         this.storyProps$ = newStoryProps$;
         this.initAngularRootElement(targetDOMNode, targetSelector);
-        await getPlatform().bootstrapModule((0, StorybookModule_1.createStorybookModule)(moduleMetadata), parameters.bootstrapModuleOptions ?? undefined);
+        const analyzedMetadata = new PropertyExtractor_1.PropertyExtractor(storyFnAngular.moduleMetadata, component);
+        const providers = [
+            // Providers for BrowserAnimations & NoopAnimationsModule
+            analyzedMetadata.singletons,
+            (0, core_1.importProvidersFrom)(...analyzedMetadata.imports.filter((imported) => {
+                const { isStandalone } = PropertyExtractor_1.PropertyExtractor.analyzeDecorators(imported);
+                return !isStandalone;
+            })),
+            analyzedMetadata.providers,
+            (0, StorybookProvider_1.storyPropsProvider)(newStoryProps$),
+        ].filter(Boolean);
+        const application = (0, StorybookModule_1.getApplication)({ storyFnAngular, component, targetSelector });
+        const applicationRef = await (0, platform_browser_1.bootstrapApplication)(application, { providers });
+        applicationRefs.add(applicationRef);
         await this.afterFullRender();
     }
     /**
@@ -115,12 +117,10 @@ class AbstractRenderer {
      * @protected
      * @memberof AbstractRenderer
      */
-    generateTargetSelectorFromStoryId() {
+    generateTargetSelectorFromStoryId(id) {
         const invalidHtmlTag = /[^A-Za-z0-9-]/g;
-        const storyIdIsInvalidHtmlTagName = invalidHtmlTag.test(this.storyId);
-        return storyIdIsInvalidHtmlTagName
-            ? `sb-${this.storyId.replace(invalidHtmlTag, '')}-component`
-            : this.storyId;
+        const storyIdIsInvalidHtmlTagName = invalidHtmlTag.test(id);
+        return storyIdIsInvalidHtmlTagName ? `sb-${id.replace(invalidHtmlTag, '')}-component` : id;
     }
     initAngularRootElement(targetDOMNode, targetSelector) {
         // Adds DOM element that angular will use as bootstrap component

package/dist/client/angular-beta/CanvasRenderer.js

@@ -7,7 +7,7 @@ class CanvasRenderer extends AbstractRenderer_1.AbstractRenderer {
         await super.render(options);
     }
     async beforeFullRender() {
-        await CanvasRenderer.resetPlatformBrowserDynamic();
+        CanvasRenderer.resetApplications();
     }
     async afterFullRender() {
         await AbstractRenderer_1.AbstractRenderer.resetCompiledComponents();

package/dist/client/angular-beta/DocsRenderer.js

@@ -18,7 +18,7 @@ class DocsRenderer extends AbstractRenderer_1.AbstractRenderer {
          *
          */
         channel.once(core_events_1.STORY_CHANGED, async () => {
-            await DocsRenderer.resetPlatformBrowserDynamic();
+            await DocsRenderer.resetApplications();
         });
         /**
          * Destroy and recreate the PlatformBrowserDynamic of angular
@@ -26,11 +26,13 @@ class DocsRenderer extends AbstractRenderer_1.AbstractRenderer {
          * for previous component
          */
         channel.once(core_events_1.DOCS_RENDERED, async () => {
-            await DocsRenderer.resetPlatformBrowserDynamic();
+            await DocsRenderer.resetApplications();
         });
         await super.render({ ...options, forced: false });
     }
-    async beforeFullRender() { }
+    async beforeFullRender() {
+        DocsRenderer.resetApplications();
+    }
     async afterFullRender() {
         await AbstractRenderer_1.AbstractRenderer.resetCompiledComponents();
     }

package/dist/client/angular-beta/RendererFactory.js

@@ -9,6 +9,7 @@ class RendererFactory {
         this.rendererMap = new Map();
     }
     async getRendererInstance(storyId, targetDOMNode) {
+        const targetId = targetDOMNode.id;
         // do nothing if the target node is null
         // fix a problem when the docs asks 2 times the same component at the same time
         // the 1st targetDOMNode of the 1st requested rendering becomes null 🤷‍♂️
@@ -18,15 +19,15 @@ class RendererFactory {
         const renderType = (0, exports.getRenderType)(targetDOMNode);
         // keep only instances of the same type
         if (this.lastRenderType && this.lastRenderType !== renderType) {
-            await AbstractRenderer_1.AbstractRenderer.resetPlatformBrowserDynamic();
+            await AbstractRenderer_1.AbstractRenderer.resetApplications();
             clearRootHTMLElement(renderType);
             this.rendererMap.clear();
         }
-        if (!this.rendererMap.has(storyId)) {
-            this.rendererMap.set(storyId, this.buildRenderer(storyId, renderType));
+        if (!this.rendererMap.has(targetId)) {
+            this.rendererMap.set(targetId, this.buildRenderer(storyId, renderType));
         }
         this.lastRenderType = renderType;
-        return this.rendererMap.get(storyId);
+        return this.rendererMap.get(targetId);
     }
     buildRenderer(storyId, renderType) {
         if (renderType === 'docs') {

package/dist/client/angular-beta/StorybookModule.d.ts

@@ -1,9 +1,6 @@
-import { Type, NgModule } from '@angular/core';
-import { Subject } from 'rxjs';
-import { ICollection, StoryFnAngularReturnType } from '../types';
-export declare const getStorybookModuleMetadata: ({ storyFnAngular, component, targetSelector, }: {
+import { StoryFnAngularReturnType } from '../types';
+export declare const getApplication: ({ storyFnAngular, component, targetSelector, }: {
     storyFnAngular: StoryFnAngularReturnType;
     component?: any;
     targetSelector: string;
-}, storyProps$: Subject<ICollection>) => NgModule;
-export declare const createStorybookModule: (ngModule: NgModule) => Type<unknown>;
+}) => import("@angular/core").Type<any>;