@storybook/angular 7.0.0-rc.9 → 7.0.1

package/README.md

@@ -7,6 +7,8 @@
   - [Setup Compodoc](#setup-compodoc)
     - [Automatic setup](#automatic-setup)
     - [Manual setup](#manual-setup)
+  - [moduleMetadata decorator](#modulemetadata-decorator)
+  - [applicationConfig decorator](#applicationconfig-decorator)
   - [FAQ](#faq)
     - [How do I migrate to a Angular Storybook builder?](#how-do-i-migrate-to-a-angular-storybook-builder)
       - [Do you have only one Angular project in your workspace?](#do-you-have-only-one-angular-project-in-your-workspace)
@@ -165,6 +167,89 @@ const preview: Preview = {
 export default preview;
 ```
 
+## moduleMetadata decorator
+
+If your component has dependencies on other Angular directives and modules, these can be supplied using the moduleMetadata decorator either for all stories or for individual stories.
+
+```js
+import { StoryFn, Meta, moduleMetadata } from '@storybook/angular';
+import { SomeComponent } from './some.component';
+
+export default {
+  component: SomeComponent,
+  decorators: [
+    // Apply metadata to all stories
+    moduleMetadata({
+      // import necessary ngModules or standalone components
+      imports: [...],
+      // declare components that are used in the template
+      declarations: [...],
+      // List of providers that should be available to the root component and all its children.
+      providers: [...],
+    }),
+  ],
+} as Meta;
+
+const Template = (): StoryFn => (args) => ({
+  props: args,
+});
+
+export const Base = Template();
+
+export const WithCustomProvider = Template();
+WithCustomProvider.decorators = [
+  // Apply metadata to a specific story
+  moduleMetadata({
+    imports: [...],
+    declarations: [...],
+    providers: [...]
+  }),
+];
+```
+
+## applicationConfig decorator
+
+If your component relies on application-wide providers, like the ones defined by BrowserAnimationsModule or any other modules which use the forRoot pattern to provide a ModuleWithProviders, you can use the applicationConfig decorator on the meta default export to provide them to the [bootstrapApplication function](https://angular.io/guide/standalone-components#configuring-dependency-injection), which we use to bootstrap the component in Storybook.
+
+```js
+
+import { StoryObj, Meta, applicationConfig } from '@storybook/angular';
+import { BrowserAnimationsModule, provideAnimations } from '@angular/platform-browser/animations';
+import { importProvidersFrom } from '@angular/core';
+import { ChipsModule } from './angular-src/chips.module';
+
+const meta: Meta = {
+  component: ChipsGroupComponent,
+  decorators: [
+    // Apply application config to all stories
+    applicationConfig({
+      // List of providers and environment providers that should be available to the root component and all its children.
+      providers: [
+        ...
+        // Import application-wide providers from a module
+        importProvidersFrom(BrowserAnimationsModule)
+        // Or use provide-style functions if available instead, e.g.
+        provideAnimations()
+      ],
+    }),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ChipsGroupComponent>;
+
+export const WithCustomApplicationProvider: Story = {
+  render: () => ({
+    // Apply application config to a specific story
+    applicationConfig: {
+      // The providers will be merged with the ones defined in the applicationConfig decorators providers array of the global meta object
+      providers: [...]
+    }
+  })
+}
+```
+
 ## FAQ
 
 ### How do I migrate to a Angular Storybook builder?

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

@@ -90,18 +90,20 @@ class AbstractRenderer {
         this.storyProps$ = newStoryProps$;
         this.initAngularRootElement(targetDOMNode, targetSelector);
         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 });
+        const application = (0, StorybookModule_1.getApplication)({
+            storyFnAngular,
+            component,
+            targetSelector,
+            analyzedMetadata,
+        });
+        const applicationRef = await (0, platform_browser_1.bootstrapApplication)(application, {
+            ...storyFnAngular.applicationConfig,
+            providers: [
+                (0, StorybookProvider_1.storyPropsProvider)(newStoryProps$),
+                ...analyzedMetadata.applicationProviders,
+                ...(storyFnAngular.applicationConfig?.providers ?? []),
+            ],
+        });
         applicationRefs.add(applicationRef);
         await this.afterFullRender();
     }

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

@@ -1,6 +1,8 @@
 import { StoryFnAngularReturnType } from '../types';
-export declare const getApplication: ({ storyFnAngular, component, targetSelector, }: {
+import { PropertyExtractor } from './utils/PropertyExtractor';
+export declare const getApplication: ({ storyFnAngular, component, targetSelector, analyzedMetadata, }: {
     storyFnAngular: StoryFnAngularReturnType;
     component?: any;
     targetSelector: string;
+    analyzedMetadata: PropertyExtractor;
 }) => import("@angular/core").Type<any>;

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getApplication = void 0;
 const StorybookWrapperComponent_1 = require("./StorybookWrapperComponent");
 const ComputesTemplateFromComponent_1 = require("./ComputesTemplateFromComponent");
-const getApplication = ({ storyFnAngular, component, targetSelector, }) => {
+const getApplication = ({ storyFnAngular, component, targetSelector, analyzedMetadata, }) => {
     const { props, styles, moduleMetadata = {} } = storyFnAngular;
     let { template } = storyFnAngular;
     const hasTemplate = !hasNoTemplate(template);
@@ -13,7 +13,15 @@ const getApplication = ({ storyFnAngular, component, targetSelector, }) => {
     /**
      * Create a component that wraps generated template and gives it props
      */
-    return (0, StorybookWrapperComponent_1.createStorybookWrapperComponent)(targetSelector, template, component, styles, moduleMetadata, props);
+    return (0, StorybookWrapperComponent_1.createStorybookWrapperComponent)({
+        moduleMetadata,
+        selector: targetSelector,
+        template,
+        storyComponent: component,
+        styles,
+        initialProps: props,
+        analyzedMetadata,
+    });
 };
 exports.getApplication = getApplication;
 function hasNoTemplate(template) {

package/dist/client/angular-beta/StorybookModule.test.js

@@ -14,6 +14,7 @@ const testing_1 = require("@angular/core/testing");
 const rxjs_1 = require("rxjs");
 const StorybookModule_1 = require("./StorybookModule");
 const StorybookProvider_1 = require("./StorybookProvider");
+const PropertyExtractor_1 = require("./utils/PropertyExtractor");
 describe('StorybookModule', () => {
     describe('getStorybookModuleMetadata', () => {
         describe('with simple component', () => {
@@ -70,10 +71,12 @@ describe('StorybookModule', () => {
                     localProperty: 'localProperty',
                     localFunction: () => 'localFunction',
                 };
+                const analyzedMetadata = new PropertyExtractor_1.PropertyExtractor({}, FooComponent);
                 const application = (0, StorybookModule_1.getApplication)({
                     storyFnAngular: { props },
                     component: FooComponent,
                     targetSelector: 'my-selector',
+                    analyzedMetadata,
                 });
                 const { fixture } = await configureTestingModule({
                     imports: [application],
@@ -96,10 +99,12 @@ describe('StorybookModule', () => {
                         expectedOutputBindingValue = value;
                     },
                 };
+                const analyzedMetadata = new PropertyExtractor_1.PropertyExtractor({}, FooComponent);
                 const application = (0, StorybookModule_1.getApplication)({
                     storyFnAngular: { props },
                     component: FooComponent,
                     targetSelector: 'my-selector',
+                    analyzedMetadata,
                 });
                 const { fixture } = await configureTestingModule({
                     imports: [application],
@@ -117,10 +122,12 @@ describe('StorybookModule', () => {
                     inputBindingPropertyName: '',
                 };
                 const storyProps$ = new rxjs_1.BehaviorSubject(initialProps);
+                const analyzedMetadata = new PropertyExtractor_1.PropertyExtractor({}, FooComponent);
                 const application = (0, StorybookModule_1.getApplication)({
                     storyFnAngular: { props: initialProps },
                     component: FooComponent,
                     targetSelector: 'my-selector',
+                    analyzedMetadata,
                 });
                 const { fixture } = await configureTestingModule({
                     imports: [application],
@@ -155,10 +162,12 @@ describe('StorybookModule', () => {
                     },
                 };
                 const storyProps$ = new rxjs_1.BehaviorSubject(initialProps);
+                const analyzedMetadata = new PropertyExtractor_1.PropertyExtractor({}, FooComponent);
                 const application = (0, StorybookModule_1.getApplication)({
                     storyFnAngular: { props: initialProps },
                     component: FooComponent,
                     targetSelector: 'my-selector',
+                    analyzedMetadata,
                 });
                 const { fixture } = await configureTestingModule({
                     imports: [application],
@@ -188,6 +197,7 @@ describe('StorybookModule', () => {
                     input: 'input',
                 };
                 const storyProps$ = new rxjs_1.BehaviorSubject(initialProps);
+                const analyzedMetadata = new PropertyExtractor_1.PropertyExtractor({}, FooComponent);
                 const application = (0, StorybookModule_1.getApplication)({
                     storyFnAngular: {
                         props: initialProps,
@@ -195,6 +205,7 @@ describe('StorybookModule', () => {
                     },
                     component: FooComponent,
                     targetSelector: 'my-selector',
+                    analyzedMetadata,
                 });
                 const { fixture } = await configureTestingModule({
                     imports: [application],
@@ -217,10 +228,12 @@ describe('StorybookModule', () => {
                     setter: 'init',
                 };
                 const storyProps$ = new rxjs_1.BehaviorSubject(initialProps);
+                const analyzedMetadata = new PropertyExtractor_1.PropertyExtractor({}, FooComponent);
                 const application = (0, StorybookModule_1.getApplication)({
                     storyFnAngular: { props: initialProps },
                     component: FooComponent,
                     targetSelector: 'my-selector',
+                    analyzedMetadata,
                 });
                 const { fixture } = await configureTestingModule({
                     imports: [application],
@@ -246,6 +259,7 @@ describe('StorybookModule', () => {
             ], WithoutSelectorComponent);
             it('should display the component', async () => {
                 const props = {};
+                const analyzedMetadata = new PropertyExtractor_1.PropertyExtractor({ entryComponents: [WithoutSelectorComponent] }, WithoutSelectorComponent);
                 const application = (0, StorybookModule_1.getApplication)({
                     storyFnAngular: {
                         props,
@@ -253,6 +267,7 @@ describe('StorybookModule', () => {
                     },
                     component: WithoutSelectorComponent,
                     targetSelector: 'my-selector',
+                    analyzedMetadata,
                 });
                 const { fixture } = await configureTestingModule({
                     imports: [application],
@@ -271,10 +286,12 @@ describe('StorybookModule', () => {
                     template: `Should not be displayed`,
                 })
             ], FooComponent);
+            const analyzedMetadata = new PropertyExtractor_1.PropertyExtractor({}, FooComponent);
             const application = (0, StorybookModule_1.getApplication)({
                 storyFnAngular: { template: '' },
                 component: FooComponent,
                 targetSelector: 'my-selector',
+                analyzedMetadata,
             });
             const { fixture } = await configureTestingModule({
                 imports: [application],

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

@@ -1,10 +1,16 @@
 import { Type } from '@angular/core';
 import { ICollection, NgModuleMetadata } from '../types';
+import { PropertyExtractor } from './utils/PropertyExtractor';
 export declare const componentNgModules: Map<any, Type<any>>;
 /**
  * Wraps the story template into a component
- *
- * @param storyComponent
- * @param initialProps
  */
-export declare const createStorybookWrapperComponent: (selector: string, template: string, storyComponent: Type<unknown> | undefined, styles: string[], moduleMetadata: NgModuleMetadata, initialProps?: ICollection) => Type<any>;
+export declare const createStorybookWrapperComponent: ({ selector, template, storyComponent, styles, moduleMetadata, initialProps, analyzedMetadata, }: {
+    selector: string;
+    template: string;
+    storyComponent: Type<unknown> | undefined;
+    styles: string[];
+    moduleMetadata: NgModuleMetadata;
+    initialProps?: ICollection;
+    analyzedMetadata?: PropertyExtractor;
+}) => Type<any>;

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

@@ -32,15 +32,11 @@ const getNonInputsOutputsProps = (ngComponentInputsOutputs, props = {}) => {
 exports.componentNgModules = new Map();
 /**
  * Wraps the story template into a component
- *
- * @param storyComponent
- * @param initialProps
  */
-const createStorybookWrapperComponent = (selector, template, storyComponent, styles, moduleMetadata, initialProps) => {
+const createStorybookWrapperComponent = ({ selector, template, storyComponent, styles, moduleMetadata, initialProps, analyzedMetadata, }) => {
     // In ivy, a '' selector is not allowed, therefore we need to just set it to anything if
     // storyComponent was not provided.
     const viewChildSelector = storyComponent ?? '__storybook-noop';
-    const analyzedMetadata = new PropertyExtractor_1.PropertyExtractor(moduleMetadata, storyComponent);
     const { imports, declarations, providers } = analyzedMetadata;
     // Only create a new module if it doesn't already exist
     // This is to prevent the module from being recreated on every story change
@@ -60,6 +56,7 @@ const createStorybookWrapperComponent = (selector, template, storyComponent, sty
         exports.componentNgModules.set(storyComponent, StorybookComponentModule);
         ngModule = exports.componentNgModules.get(storyComponent);
     }
+    PropertyExtractor_1.PropertyExtractor.warnImportsModuleWithProviders(analyzedMetadata);
     let StorybookWrapperComponent = class StorybookWrapperComponent {
         constructor(storyProps$, changeDetectorRef) {
             this.storyProps$ = storyProps$;

package/dist/client/angular-beta/utils/PropertyExtractor.d.ts

@@ -1,4 +1,4 @@
-import { InjectionToken, NgModule, Provider, ɵReflectionCapabilities as ReflectionCapabilities } from '@angular/core';
+import { importProvidersFrom, InjectionToken, NgModule, Provider, ɵReflectionCapabilities as ReflectionCapabilities } from '@angular/core';
 import { NgModuleMetadata } from '../../types';
 export declare const reflectionCapabilities: ReflectionCapabilities;
 export declare const REMOVED_MODULES: InjectionToken<unknown>;
@@ -9,21 +9,21 @@ export declare class PropertyExtractor implements NgModuleMetadata {
     declarations?: any[];
     imports?: any[];
     providers?: Provider[];
-    singletons?: Provider[];
+    applicationProviders?: Array<Provider | ReturnType<typeof importProvidersFrom>>;
     constructor(metadata: NgModuleMetadata, component?: any);
+    static warnImportsModuleWithProviders(propertyExtractor: PropertyExtractor): void;
     private init;
     /**
      * Analyze NgModule Metadata
      *
      * - Removes Restricted Imports
      * - Extracts providers from ModuleWithProviders
-     * - Flattens imports
      * - Returns a new NgModuleMetadata object
      *
      *
      */
     private analyzeMetadata;
-    static analyzeRestricted: (ngModule: NgModule) => (boolean | Provider[])[];
+    static analyzeRestricted: (ngModule: NgModule) => [boolean] | [boolean, Provider];
     static analyzeDecorators: (component: any) => {
         isDeclarable: boolean;
         isStandalone: boolean;

package/dist/client/angular-beta/utils/PropertyExtractor.js

@@ -1,11 +1,16 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PropertyExtractor = exports.uniqueArray = exports.REMOVED_MODULES = exports.reflectionCapabilities = void 0;
+/* eslint-disable no-console */
 const common_1 = require("@angular/common");
 const core_1 = require("@angular/core");
 const platform_browser_1 = require("@angular/platform-browser");
 const animations_1 = require("@angular/platform-browser/animations");
+const ts_dedent_1 = __importDefault(require("ts-dedent"));
 const NgModulesAnalyzer_1 = require("./NgModulesAnalyzer");
 exports.reflectionCapabilities = new core_1.ɵReflectionCapabilities();
 exports.REMOVED_MODULES = new core_1.InjectionToken('REMOVED_MODULES');
@@ -28,7 +33,6 @@ class PropertyExtractor {
          *
          * - Removes Restricted Imports
          * - Extracts providers from ModuleWithProviders
-         * - Flattens imports
          * - Returns a new NgModuleMetadata object
          *
          *
@@ -36,27 +40,41 @@ class PropertyExtractor {
         this.analyzeMetadata = (metadata) => {
             const declarations = [...(metadata?.declarations || [])];
             const providers = [...(metadata?.providers || [])];
-            const singletons = [...(metadata?.singletons || [])];
+            const applicationProviders = [];
             const imports = [...(metadata?.imports || [])].reduce((acc, imported) => {
                 // remove ngModule and use only its providers if it is restricted
                 // (e.g. BrowserModule, BrowserAnimationsModule, NoopAnimationsModule, ...etc)
                 const [isRestricted, restrictedProviders] = PropertyExtractor.analyzeRestricted(imported);
                 if (isRestricted) {
-                    singletons.unshift(restrictedProviders || []);
+                    applicationProviders.unshift(restrictedProviders || []);
                     return acc;
                 }
                 acc.push(imported);
                 return acc;
             }, []);
-            return { ...metadata, imports, providers, singletons, declarations };
+            return { ...metadata, imports, providers, applicationProviders, declarations };
         };
         this.init();
     }
+    // With the new way of mounting standalone components to the DOM via bootstrapApplication API,
+    // we should now pass ModuleWithProviders to the providers array of the bootstrapApplication function.
+    static warnImportsModuleWithProviders(propertyExtractor) {
+        const hasModuleWithProvidersImport = propertyExtractor.imports.some((importedModule) => 'ngModule' in importedModule);
+        if (hasModuleWithProvidersImport) {
+            console.warn((0, ts_dedent_1.default)(`
+          Storybook Warning: 
+          moduleMetadata property 'imports' contains one or more ModuleWithProviders, likely the result of a 'Module.forRoot()'-style call.
+          In Storybook 7.0 we use Angular's new 'bootstrapApplication' API to mount the component to the DOM, which accepts a list of providers to set up application-wide providers.
+          Use the 'applicationConfig' decorator from '@storybook/angular' to pass your ModuleWithProviders to the 'providers' property in combination with the importProvidersFrom helper function from '@angular/core' to extract all the necessary providers.
+          Visit https://angular.io/guide/standalone-components#configuring-dependency-injection for more information
+          `));
+        }
+    }
     init() {
         const analyzed = this.analyzeMetadata(this.metadata);
         this.imports = (0, exports.uniqueArray)([common_1.CommonModule, analyzed.imports]);
         this.providers = (0, exports.uniqueArray)(analyzed.providers);
-        this.singletons = (0, exports.uniqueArray)(analyzed.singletons);
+        this.applicationProviders = (0, exports.uniqueArray)(analyzed.applicationProviders);
         this.declarations = (0, exports.uniqueArray)(analyzed.declarations);
         if (this.component) {
             const { isDeclarable, isStandalone } = PropertyExtractor.analyzeDecorators(this.component);
@@ -73,28 +91,36 @@ class PropertyExtractor {
 exports.PropertyExtractor = PropertyExtractor;
 _a = PropertyExtractor;
 PropertyExtractor.analyzeRestricted = (ngModule) => {
-    /**
-     * BrowserModule is restricted,
-     * because bootstrapApplication API, which mounts the component to the DOM,
-     * automatically imports BrowserModule
-     */
     if (ngModule === platform_browser_1.BrowserModule) {
+        console.warn((0, ts_dedent_1.default) `
+          Storybook Warning:
+          You have imported the "BrowserModule", which is not necessary anymore. 
+          In Storybook v7.0 we are using Angular's new bootstrapApplication API to mount an Angular application to the DOM.
+          Note that the BrowserModule providers are automatically included when starting an application with bootstrapApplication()
+          Please remove the "BrowserModule" from the list of imports in your moduleMetadata definition to remove this warning.
+        `);
         return [true];
     }
-    /**
-     * BrowserAnimationsModule imports BrowserModule, which is restricted,
-     * because bootstrapApplication API, which mounts the component to the DOM,
-     * automatically imports BrowserModule
-     */
     if (ngModule === animations_1.BrowserAnimationsModule) {
+        console.warn((0, ts_dedent_1.default) `
+          Storybook Warning:
+          You have added the "BrowserAnimationsModule" to the list of "imports" in your moduleMetadata definition of your Story.
+          In Storybook 7.0 we use Angular's new 'bootstrapApplication' API to mount the component to the DOM, which accepts a list of providers to set up application-wide providers.
+          Use the 'applicationConfig' decorator from '@storybook/angular' and add the "provideAnimations" function to the list of "providers".
+          If your Angular version does not support "provide-like" functions, use the helper function importProvidersFrom instead to set up animations. For this case, please add "importProvidersFrom(BrowserAnimationsModule)" to the list of providers of your applicationConfig definition.
+          Please visit https://angular.io/guide/standalone-components#configuring-dependency-injection for more information.
+        `);
         return [true, (0, animations_1.provideAnimations)()];
     }
-    /**
-     * NoopAnimationsModule imports BrowserModule, which is restricted,
-     * because bootstrapApplication API, which mounts the component to the DOM,
-     * automatically imports BrowserModule
-     */
     if (ngModule === animations_1.NoopAnimationsModule) {
+        console.warn((0, ts_dedent_1.default) `
+          Storybook Warning:
+          You have added the "NoopAnimationsModule" to the list of "imports" in your moduleMetadata definition of your Story.
+          In Storybook v7.0 we are using Angular's new bootstrapApplication API to mount an Angular application to the DOM, which accepts a list of providers to set up application-wide providers.
+          Use the 'applicationConfig' decorator from '@storybook/angular' and add the "provideNoopAnimations" function to the list of "providers".
+          If your Angular version does not support "provide-like" functions, use the helper function importProvidersFrom instead to set up noop animations and to extract all necessary providers from NoopAnimationsModule. For this case, please add "importProvidersFrom(NoopAnimationsModule)" to the list of providers of your applicationConfig definition.
+          Please visit https://angular.io/guide/standalone-components#configuring-dependency-injection for more information.
+        `);
         return [true, (0, animations_1.provideNoopAnimations)()];
     }
     return [false];

package/dist/client/angular-beta/utils/PropertyExtractor.test.js

@@ -40,9 +40,9 @@ const extractProviders = (metadata, component) => {
     const { providers } = new PropertyExtractor_1.PropertyExtractor(metadata, component);
     return providers;
 };
-const extractSingletons = (metadata, component) => {
-    const { singletons } = new PropertyExtractor_1.PropertyExtractor(metadata, component);
-    return singletons;
+const extractApplicationProviders = (metadata, component) => {
+    const { applicationProviders } = new PropertyExtractor_1.PropertyExtractor(metadata, component);
+    return applicationProviders;
 };
 describe('PropertyExtractor', () => {
     describe('analyzeMetadata', () => {
@@ -50,46 +50,46 @@ describe('PropertyExtractor', () => {
             const metadata = {
                 imports: [platform_browser_1.BrowserModule],
             };
-            const { imports, providers, singletons } = analyzeMetadata(metadata);
+            const { imports, providers, applicationProviders } = analyzeMetadata(metadata);
             expect(imports.flat(Number.MAX_VALUE)).toEqual([common_1.CommonModule]);
             expect(providers.flat(Number.MAX_VALUE)).toEqual([]);
-            expect(singletons.flat(Number.MAX_VALUE)).toEqual([]);
+            expect(applicationProviders.flat(Number.MAX_VALUE)).toEqual([]);
         });
         it('should remove BrowserAnimationsModule and use its providers instead', () => {
             const metadata = {
                 imports: [animations_1.BrowserAnimationsModule],
             };
-            const { imports, providers, singletons } = analyzeMetadata(metadata);
+            const { imports, providers, applicationProviders } = analyzeMetadata(metadata);
             expect(imports.flat(Number.MAX_VALUE)).toEqual([common_1.CommonModule]);
             expect(providers.flat(Number.MAX_VALUE)).toEqual([]);
-            expect(singletons.flat(Number.MAX_VALUE)).toEqual((0, animations_1.provideAnimations)());
+            expect(applicationProviders.flat(Number.MAX_VALUE)).toEqual((0, animations_1.provideAnimations)());
         });
         it('should remove NoopAnimationsModule and use its providers instead', () => {
             const metadata = {
                 imports: [animations_1.NoopAnimationsModule],
             };
-            const { imports, providers, singletons } = analyzeMetadata(metadata);
+            const { imports, providers, applicationProviders } = analyzeMetadata(metadata);
             expect(imports.flat(Number.MAX_VALUE)).toEqual([common_1.CommonModule]);
             expect(providers.flat(Number.MAX_VALUE)).toEqual([]);
-            expect(singletons.flat(Number.MAX_VALUE)).toEqual((0, animations_1.provideNoopAnimations)());
+            expect(applicationProviders.flat(Number.MAX_VALUE)).toEqual((0, animations_1.provideNoopAnimations)());
         });
         it('should remove Browser/Animations modules recursively', () => {
             const metadata = {
                 imports: [animations_1.BrowserAnimationsModule, platform_browser_1.BrowserModule],
             };
-            const { imports, providers, singletons } = analyzeMetadata(metadata);
+            const { imports, providers, applicationProviders } = analyzeMetadata(metadata);
             expect(imports.flat(Number.MAX_VALUE)).toEqual([common_1.CommonModule]);
             expect(providers.flat(Number.MAX_VALUE)).toEqual([]);
-            expect(singletons.flat(Number.MAX_VALUE)).toEqual((0, animations_1.provideAnimations)());
+            expect(applicationProviders.flat(Number.MAX_VALUE)).toEqual((0, animations_1.provideAnimations)());
         });
         it('should not destructure Angular official module', () => {
             const metadata = {
                 imports: [test_module_1.WithOfficialModule],
             };
-            const { imports, providers, singletons } = analyzeMetadata(metadata);
+            const { imports, providers, applicationProviders } = analyzeMetadata(metadata);
             expect(imports.flat(Number.MAX_VALUE)).toEqual([common_1.CommonModule, test_module_1.WithOfficialModule]);
             expect(providers.flat(Number.MAX_VALUE)).toEqual([]);
-            expect(singletons.flat(Number.MAX_VALUE)).toEqual([]);
+            expect(applicationProviders.flat(Number.MAX_VALUE)).toEqual([]);
         });
     });
     describe('extractImports', () => {
@@ -132,7 +132,7 @@ describe('PropertyExtractor', () => {
             expect(providers).toEqual([TestService]);
         });
         it('should return an array of singletons extracted', () => {
-            const singeltons = extractSingletons({
+            const singeltons = extractApplicationProviders({
                 imports: [animations_1.BrowserAnimationsModule],
             });
             expect(singeltons).toEqual((0, animations_1.provideAnimations)());

package/dist/client/decorateStory.test.js

@@ -169,37 +169,6 @@ describe('decorateStory', () => {
                 userDefinedTemplate: false,
             });
         });
-        it('should include legacy story components in decorators', () => {
-            const decorators = [
-                (s) => {
-                    const story = s();
-                    return {
-                        ...story,
-                        template: `<parent>${story.template}</parent>`,
-                    };
-                },
-                (s) => {
-                    const story = s();
-                    return {
-                        ...story,
-                        template: `<grandparent>${story.template}</grandparent>`,
-                    };
-                },
-                (s) => {
-                    const story = s();
-                    return {
-                        ...story,
-                        template: `<great-grandparent>${story.template}</great-grandparent>`,
-                    };
-                },
-            ];
-            const decorated = (0, decorateStory_1.default)(() => ({ component: FooComponent }), decorators);
-            expect(decorated(makeContext({}))).toEqual({
-                template: '<great-grandparent><grandparent><parent><foo></foo></parent></grandparent></great-grandparent>',
-                component: FooComponent,
-                userDefinedTemplate: false,
-            });
-        });
         it('should keep template with an empty value', () => {
             const decorators = [
                 (0, decorators_1.componentWrapperDecorator)(ParentComponent),

package/dist/client/decorators.d.ts

@@ -1,5 +1,14 @@
 import { Type } from '@angular/core';
+import { ApplicationConfig } from '@angular/platform-browser';
 import { DecoratorFunction, StoryContext } from '@storybook/types';
 import { ICollection, NgModuleMetadata, AngularRenderer } from './types';
 export declare const moduleMetadata: <TArgs = any>(metadata: Partial<NgModuleMetadata>) => DecoratorFunction<AngularRenderer, TArgs>;
+/**
+ * Decorator to set the config options which are available during the application bootstrap operation
+ */
+export declare function applicationConfig<TArgs = any>(
+/**
+ * Set of config options available during the application bootstrap operation.
+ */
+config: ApplicationConfig): DecoratorFunction<AngularRenderer, TArgs>;
 export declare const componentWrapperDecorator: <TArgs = any>(element: Type<unknown> | ((story: string) => string), props?: ICollection | ((storyContext: StoryContext<AngularRenderer, TArgs>) => ICollection)) => DecoratorFunction<AngularRenderer, TArgs>;

package/dist/client/decorators.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.componentWrapperDecorator = exports.moduleMetadata = void 0;
+exports.componentWrapperDecorator = exports.applicationConfig = exports.moduleMetadata = void 0;
 const ComputesTemplateFromComponent_1 = require("./angular-beta/ComputesTemplateFromComponent");
 const NgComponentAnalyzer_1 = require("./angular-beta/utils/NgComponentAnalyzer");
 // We use `any` here as the default type rather than `Args` because we need something that is
@@ -24,6 +24,30 @@ const moduleMetadata = (metadata) => (storyFn) => {
     };
 };
 exports.moduleMetadata = moduleMetadata;
+/**
+ * Decorator to set the config options which are available during the application bootstrap operation
+ */
+function applicationConfig(
+/**
+ * Set of config options available during the application bootstrap operation.
+ */
+config) {
+    return (storyFn) => {
+        const story = storyFn();
+        const storyConfig = story.applicationConfig;
+        return {
+            ...story,
+            applicationConfig: storyConfig || config
+                ? {
+                    ...config,
+                    ...storyConfig,
+                    providers: [...(config?.providers || []), ...(storyConfig?.providers || [])],
+                }
+                : undefined,
+        };
+    };
+}
+exports.applicationConfig = applicationConfig;
 const componentWrapperDecorator = (element, props) => (storyFn, storyContext) => {
     const story = storyFn();
     const currentProps = typeof props === 'function' ? props(storyContext) : props;

package/dist/client/decorators.test.js

@@ -39,18 +39,58 @@ let MockComponent = class MockComponent {
 MockComponent = __decorate([
     (0, core_1.Component)({})
 ], MockComponent);
+describe('applicationConfig', () => {
+    const provider1 = () => { };
+    const provider2 = () => { };
+    it('should apply global config', () => {
+        expect((0, decorators_1.applicationConfig)({
+            providers: [provider1],
+        })(() => ({}), defaultContext)).toEqual({
+            applicationConfig: {
+                providers: [provider1],
+            },
+        });
+    });
+    it('should apply story config', () => {
+        expect((0, decorators_1.applicationConfig)({
+            providers: [],
+        })(() => ({
+            applicationConfig: {
+                providers: [provider2],
+            },
+        }), {
+            ...defaultContext,
+        })).toEqual({
+            applicationConfig: {
+                providers: [provider2],
+            },
+        });
+    });
+    it('should merge global and story config', () => {
+        expect((0, decorators_1.applicationConfig)({
+            providers: [provider1],
+        })(() => ({
+            applicationConfig: {
+                providers: [provider2],
+            },
+        }), {
+            ...defaultContext,
+        })).toEqual({
+            applicationConfig: {
+                providers: [provider1, provider2],
+            },
+        });
+    });
+});
 describe('moduleMetadata', () => {
     it('should add metadata to a story without it', () => {
         const result = (0, decorators_1.moduleMetadata)({
             imports: [MockModule],
             providers: [MockService],
-        })(() => ({
-            component: MockComponent,
-        }), 
+        })(() => ({}), 
         // deepscan-disable-next-line
         defaultContext);
         expect(result).toEqual({
-            component: MockComponent,
             moduleMetadata: {
                 declarations: [],
                 entryComponents: [],

package/dist/client/index.d.ts

@@ -2,4 +2,4 @@ import './globals';
 export * from './public-api';
 export * from './public-types';
 export type { StoryFnAngularReturnType as IStory } from './types';
-export { moduleMetadata, componentWrapperDecorator } from './decorators';
+export { moduleMetadata, componentWrapperDecorator, applicationConfig } from './decorators';

package/dist/client/index.js

@@ -15,7 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.componentWrapperDecorator = exports.moduleMetadata = void 0;
+exports.applicationConfig = exports.componentWrapperDecorator = exports.moduleMetadata = void 0;
 require("./globals");
 // eslint-disable-next-line import/export
 __exportStar(require("./public-api"), exports);
@@ -24,5 +24,6 @@ __exportStar(require("./public-types"), exports);
 var decorators_1 = require("./decorators");
 Object.defineProperty(exports, "moduleMetadata", { enumerable: true, get: function () { return decorators_1.moduleMetadata; } });
 Object.defineProperty(exports, "componentWrapperDecorator", { enumerable: true, get: function () { return decorators_1.componentWrapperDecorator; } });
+Object.defineProperty(exports, "applicationConfig", { enumerable: true, get: function () { return decorators_1.applicationConfig; } });
 // optimization: stop HMR propagation in webpack
 module?.hot?.decline();

package/dist/client/types.d.ts

@@ -1,22 +1,31 @@
+import { Provider } from '@angular/core';
+import { ApplicationConfig } from '@angular/platform-browser';
 import { Parameters as DefaultParameters, StoryContext as DefaultStoryContext, WebRenderer } from '@storybook/types';
 export interface NgModuleMetadata {
+    /**
+     * List of components, directives, and pipes that belong to your component.
+     */
     declarations?: any[];
     entryComponents?: any[];
+    /**
+     * List of modules that should be available to the root Storybook Component and all its children.
+     * If you want to register application providers or if you want to use the forRoot() pattern, please use the `applicationConfig` decorator in combination with the importProvidersFrom helper function from @angular/core instead.
+     */
     imports?: any[];
     schemas?: any[];
-    providers?: any[];
-    singletons?: any[];
+    /**
+     * List of providers that should be available on the root component and all its children.
+     * Use the `applicationConfig` decorator to register environemt and application-wide providers.
+     */
+    providers?: Provider[];
 }
 export interface ICollection {
     [p: string]: any;
 }
 export interface StoryFnAngularReturnType {
-    /** @deprecated `component` story input is deprecated, and will be removed in Storybook 7.0. */
-    component?: any;
     props?: ICollection;
-    /** @deprecated `propsMeta` story input is deprecated, and will be removed in Storybook 7.0. */
-    propsMeta?: ICollection;
     moduleMetadata?: NgModuleMetadata;
+    applicationConfig?: ApplicationConfig;
     template?: string;
     styles?: string[];
     userDefinedTemplate?: boolean;

package/dist/server/framework-preset-angular-docs.js

@@ -1,14 +1,10 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.previewAnnotations = void 0;
-const path_1 = __importDefault(require("path"));
 const docs_tools_1 = require("@storybook/docs-tools");
 const previewAnnotations = (entry = [], options) => {
     if (!(0, docs_tools_1.hasDocsOrControls)(options))
         return entry;
-    return [...entry, path_1.default.join(__dirname, '../../dist/client/docs/config')];
+    return [...entry, require.resolve('../client/docs/config')];
 };
 exports.previewAnnotations = previewAnnotations;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "7.0.0-rc.9",
+  "version": "7.0.1",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
@@ -36,20 +36,20 @@
     "prep": "../../../scripts/prepare/tsc.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-rc.9",
-    "@storybook/cli": "7.0.0-rc.9",
-    "@storybook/client-logger": "7.0.0-rc.9",
-    "@storybook/core-client": "7.0.0-rc.9",
-    "@storybook/core-common": "7.0.0-rc.9",
-    "@storybook/core-events": "7.0.0-rc.9",
-    "@storybook/core-server": "7.0.0-rc.9",
-    "@storybook/core-webpack": "7.0.0-rc.9",
-    "@storybook/docs-tools": "7.0.0-rc.9",
+    "@storybook/builder-webpack5": "7.0.1",
+    "@storybook/cli": "7.0.1",
+    "@storybook/client-logger": "7.0.1",
+    "@storybook/core-client": "7.0.1",
+    "@storybook/core-common": "7.0.1",
+    "@storybook/core-events": "7.0.1",
+    "@storybook/core-server": "7.0.1",
+    "@storybook/core-webpack": "7.0.1",
+    "@storybook/docs-tools": "7.0.1",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.0.0-rc.9",
-    "@storybook/node-logger": "7.0.0-rc.9",
-    "@storybook/preview-api": "7.0.0-rc.9",
-    "@storybook/types": "7.0.0-rc.9",
+    "@storybook/manager-api": "7.0.1",
+    "@storybook/node-logger": "7.0.1",
+    "@storybook/preview-api": "7.0.1",
+    "@storybook/types": "7.0.1",
     "@types/node": "^16.0.0",
     "@types/react": "^16.14.34",
     "@types/react-dom": "^16.9.14",
@@ -123,5 +123,5 @@
   "bundler": {
     "tsConfig": "tsconfig.build.json"
   },
-  "gitHead": "618743e115ad0f172537a4b7b6cdfb0beaef52b5"
+  "gitHead": "2fe0c39167a40d6856f5cbc2ab927b3b65fc384b"
 }

package/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts

@@ -1,5 +1,5 @@
 import { OnDestroy, OnInit, Component } from '@angular/core';
-import { Meta, StoryFn } from '@storybook/angular';
+import { Meta, StoryObj } from '@storybook/angular';
 
 @Component({
   selector: 'on-destroy',
@@ -37,6 +37,4 @@ export default {
   },
 } as Meta;
 
-export const SimpleComponent: StoryFn = () => ({
-  component: OnDestroyComponent,
-});
+export const SimpleComponent: StoryObj = {};

package/template/stories/core/applicationConfig/with-browser-animations.stories.ts

@@ -0,0 +1,40 @@
+import { Meta, StoryObj, applicationConfig } from '@storybook/angular';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { within, userEvent } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+import { importProvidersFrom } from '@angular/core';
+import { OpenCloseComponent } from '../moduleMetadata/angular-src/open-close-component/open-close.component';
+
+const meta: Meta = {
+  component: OpenCloseComponent,
+  decorators: [
+    applicationConfig({
+      providers: [importProvidersFrom(BrowserAnimationsModule)],
+    }),
+  ],
+  parameters: {
+    chromatic: { delay: 100 },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof OpenCloseComponent>;
+
+export const WithBrowserAnimations: Story = {
+  render: () => ({
+    template: `<app-open-close></app-open-close>`,
+    moduleMetadata: {
+      declarations: [OpenCloseComponent],
+    },
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const opened = canvas.getByText('The box is now Open!');
+    expect(opened).toBeDefined();
+    const submitButton = canvas.getByRole('button');
+    await userEvent.click(submitButton);
+    const closed = canvas.getByText('The box is now Closed!');
+    expect(closed).toBeDefined();
+  },
+};

package/template/stories/core/applicationConfig/with-noop-browser-animations.stories.ts

@@ -0,0 +1,35 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { within, userEvent } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+import { importProvidersFrom } from '@angular/core';
+import { OpenCloseComponent } from '../moduleMetadata/angular-src/open-close-component/open-close.component';
+
+const meta: Meta = {
+  component: OpenCloseComponent,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof OpenCloseComponent>;
+
+export const WithNoopBrowserAnimations: Story = {
+  render: () => ({
+    template: `<app-open-close></app-open-close>`,
+    applicationConfig: {
+      providers: [importProvidersFrom(NoopAnimationsModule)],
+    },
+    moduleMetadata: {
+      declarations: [OpenCloseComponent],
+    },
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const opened = canvas.getByText('The box is now Open!');
+    expect(opened).toBeDefined();
+    const submitButton = canvas.getByRole('button');
+    await userEvent.click(submitButton);
+    const closed = canvas.getByText('The box is now Closed!');
+    expect(closed).toBeDefined();
+  },
+};

package/template/stories/others/ngx-translate/README.stories.mdx

@@ -15,7 +15,7 @@ Here is a simple example with a storybook decorator that you can place in the `p
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
-import { moduleMetadata } from '@storybook/angular';
+import { moduleMetadata, applicationConfig } from '@storybook/angular';
 
 function createTranslateLoader(http: HttpClient) {
   return new TranslateHttpLoader(http, '/assets/i18n/', '.json');
@@ -24,23 +24,30 @@ function createTranslateLoader(http: HttpClient) {
 const TranslateModuleDecorator = (storyFunc, context) => {
   const { locale } = context.globals;
 
-  return moduleMetadata({
-    imports: [
-      HttpClientModule,
-      TranslateModule.forRoot({
-        defaultLanguage: locale,
-        loader: {
-          provide: TranslateLoader,
-          useFactory: createTranslateLoader,
-          deps: [HttpClient],
-        },
-      }),
-    ],
+  return applicationConfig({
+    providers: [
+      importProvidersFrom(
+        HttpClientModule, 
+        TranslateModule.forRoot({
+          defaultLanguage: locale,
+          loader: {
+            provide: TranslateLoader,
+            useFactory: createTranslateLoader,
+            deps: [HttpClient],
+          },
+        })
+      )
+    ]
   })(storyFunc, context);
 };
 
 // for `preview.ts`
-export const decorators = [TranslateModuleDecorator];
+export const decorators = [
+  moduleMetadata({
+    imports: [TranslateModule],
+  }),
+  TranslateModuleDecorator,
+];
 ```
 
 If the `TranslateModule.forRoot` is made by another module you can try to set this provider `DEFAULT_LANGUAGE`
@@ -51,7 +58,7 @@ import { DEFAULT_LANGUAGE } from '@ngx-translate/core';
 const TranslateModuleDecorator = (storyFunc, context) => {
   const { locale } = context.globals;
 
-  return moduleMetadata({
+  return applicationConfig({
     providers: [{ provide: DEFAULT_LANGUAGE, useValue: locale }],
   })(storyFunc, context);
 };

package/dist/client/angular/app.component.d.ts

@@ -1,38 +0,0 @@
-import { ViewContainerRef, ChangeDetectorRef, OnInit, ComponentFactoryResolver, OnDestroy } from '@angular/core';
-import { Observable, Subscription } from 'rxjs';
-import { StoryFnAngularReturnType } from '../types';
-export declare class AppComponent implements OnInit, OnDestroy {
-    private cfr;
-    private changeDetectorRef;
-    private data;
-    target: ViewContainerRef;
-    readonly previousValues: {
-        [key: string]: any;
-    };
-    subscription: Subscription;
-    propSubscriptions: Map<any, {
-        prop: any;
-        sub: Subscription;
-    }>;
-    constructor(cfr: ComponentFactoryResolver, changeDetectorRef: ChangeDetectorRef, data: Observable<StoryFnAngularReturnType>);
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    /**
-     * Set inputs and outputs
-     */
-    private setProps;
-    /**
-     * Manually call 'ngOnChanges' hook because angular doesn't do that for dynamic components
-     * Issue: [https://github.com/angular/angular/issues/8903]
-     */
-    private callNgOnChangesHook;
-    /**
-     * If component implements ControlValueAccessor interface try to set ngModel
-     */
-    private setNgModel;
-    /**
-     * Store ref to subscription for cleanup in 'ngOnDestroy' and check if
-     * observable needs to be resubscribed to, before creating a new subscription.
-     */
-    private setPropSubscription;
-}

package/dist/client/angular/app.component.js

@@ -1,141 +0,0 @@
-"use strict";
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-var __param = (this && this.__param) || function (paramIndex, decorator) {
-    return function (target, key) { decorator(target, key, paramIndex); }
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AppComponent = void 0;
-// We could use NgComponentOutlet here but there's currently no easy way
-// to provide @Inputs and subscribe to @Outputs, see
-// https://github.com/angular/angular/issues/15360
-// For the time being, the ViewContainerRef approach works pretty well.
-const core_1 = require("@angular/core");
-const rxjs_1 = require("rxjs");
-const operators_1 = require("rxjs/operators");
-const app_token_1 = require("./app.token");
-let AppComponent = class AppComponent {
-    constructor(cfr, changeDetectorRef, data) {
-        this.cfr = cfr;
-        this.changeDetectorRef = changeDetectorRef;
-        this.data = data;
-        this.previousValues = {};
-        this.propSubscriptions = new Map();
-    }
-    ngOnInit() {
-        this.data.pipe((0, operators_1.first)()).subscribe((data) => {
-            this.target.clear();
-            const compFactory = this.cfr.resolveComponentFactory(data.component);
-            const componentRef = this.target.createComponent(compFactory);
-            const { instance } = componentRef;
-            // For some reason, manual change detection ref is only working when getting the ref from the injector (rather than componentRef.changeDetectorRef)
-            const childChangeDetectorRef = componentRef.injector.get(core_1.ChangeDetectorRef);
-            this.subscription = this.data.subscribe((newData) => {
-                this.setProps(instance, newData);
-                childChangeDetectorRef.markForCheck();
-                // Must detect changes on the current component in order to update any changes in child component's @HostBinding properties (angular/angular#22560)
-                this.changeDetectorRef.detectChanges();
-            });
-        });
-    }
-    ngOnDestroy() {
-        this.target.clear();
-        if (this.subscription) {
-            this.subscription.unsubscribe();
-        }
-        this.propSubscriptions.forEach((v) => {
-            if (!v.sub.closed) {
-                v.sub.unsubscribe();
-            }
-        });
-        this.propSubscriptions.clear();
-    }
-    /**
-     * Set inputs and outputs
-     */
-    setProps(instance, { props = {} }) {
-        const changes = {};
-        const hasNgOnChangesHook = !!instance.ngOnChanges;
-        Object.keys(props).forEach((key) => {
-            const value = props[key];
-            const instanceProperty = instance[key];
-            if (!(instanceProperty instanceof core_1.EventEmitter) && value !== undefined && value !== null) {
-                // eslint-disable-next-line no-param-reassign
-                instance[key] = value;
-                if (hasNgOnChangesHook) {
-                    const previousValue = this.previousValues[key];
-                    if (previousValue !== value) {
-                        changes[key] = new core_1.SimpleChange(previousValue, value, !Object.prototype.hasOwnProperty.call(this.previousValues, key));
-                        this.previousValues[key] = value;
-                    }
-                }
-            }
-            else if (typeof value === 'function' && key !== 'ngModelChange') {
-                this.setPropSubscription(key, instanceProperty, value);
-            }
-        });
-        this.callNgOnChangesHook(instance, changes);
-        this.setNgModel(instance, props);
-    }
-    /**
-     * Manually call 'ngOnChanges' hook because angular doesn't do that for dynamic components
-     * Issue: [https://github.com/angular/angular/issues/8903]
-     */
-    callNgOnChangesHook(instance, changes) {
-        if (Object.keys(changes).length) {
-            instance.ngOnChanges(changes);
-        }
-    }
-    /**
-     * If component implements ControlValueAccessor interface try to set ngModel
-     */
-    setNgModel(instance, props) {
-        if (props.ngModel) {
-            instance.writeValue(props.ngModel);
-        }
-        if (typeof props.ngModelChange === 'function') {
-            instance.registerOnChange(props.ngModelChange);
-        }
-    }
-    /**
-     * Store ref to subscription for cleanup in 'ngOnDestroy' and check if
-     * observable needs to be resubscribed to, before creating a new subscription.
-     */
-    setPropSubscription(key, instanceProperty, value) {
-        if (this.propSubscriptions.has(key)) {
-            const v = this.propSubscriptions.get(key);
-            if (v.prop === value) {
-                // Prop hasn't changed, so the existing subscription can stay.
-                return;
-            }
-            // Now that the value has changed, unsubscribe from the previous value's subscription.
-            if (!v.sub.closed) {
-                v.sub.unsubscribe();
-            }
-        }
-        const sub = instanceProperty.subscribe(value);
-        this.propSubscriptions.set(key, { prop: value, sub });
-    }
-};
-__decorate([
-    (0, core_1.ViewChild)('target', { read: core_1.ViewContainerRef, static: true }),
-    __metadata("design:type", core_1.ViewContainerRef)
-], AppComponent.prototype, "target", void 0);
-AppComponent = __decorate([
-    (0, core_1.Component)({
-        selector: 'storybook-dynamic-app-root',
-        template: '<ng-template #target></ng-template>',
-    }),
-    __param(2, (0, core_1.Inject)(app_token_1.STORY)),
-    __metadata("design:paramtypes", [core_1.ComponentFactoryResolver,
-        core_1.ChangeDetectorRef,
-        rxjs_1.Observable])
-], AppComponent);
-exports.AppComponent = AppComponent;

package/dist/client/angular/app.token.d.ts

@@ -1,3 +0,0 @@
-import { InjectionToken } from '@angular/core';
-import { StoryFnAngularReturnType } from '../types';
-export declare const STORY: InjectionToken<StoryFnAngularReturnType>;

package/dist/client/angular/app.token.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.STORY = void 0;
-const core_1 = require("@angular/core");
-exports.STORY = new core_1.InjectionToken('story');

package/template/stories/core/moduleMetadata/with-browser-animations.stories.ts

@@ -1,30 +0,0 @@
-import { Meta, StoryFn } from '@storybook/angular';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { within, userEvent } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
-import { OpenCloseComponent } from './angular-src/open-close-component/open-close.component';
-
-export default {
-  component: OpenCloseComponent,
-  parameters: {
-    chromatic: { delay: 100 },
-  },
-} as Meta;
-
-export const WithBrowserAnimations: StoryFn = () => ({
-  template: `<app-open-close></app-open-close>`,
-  moduleMetadata: {
-    declarations: [OpenCloseComponent],
-    imports: [BrowserAnimationsModule],
-  },
-});
-
-WithBrowserAnimations.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const opened = canvas.getByText('The box is now Open!');
-  expect(opened).toBeDefined();
-  const submitButton = canvas.getByRole('button');
-  await userEvent.click(submitButton);
-  const closed = canvas.getByText('The box is now Closed!');
-  expect(closed).toBeDefined();
-};

package/template/stories/core/moduleMetadata/with-noop-browser-animations.stories.ts

@@ -1,27 +0,0 @@
-import { Meta, StoryFn } from '@storybook/angular';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { within, userEvent } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
-import { OpenCloseComponent } from './angular-src/open-close-component/open-close.component';
-
-export default {
-  component: OpenCloseComponent,
-} as Meta;
-
-export const WithNoopBrowserAnimations: StoryFn = () => ({
-  template: `<app-open-close></app-open-close>`,
-  moduleMetadata: {
-    declarations: [OpenCloseComponent],
-    imports: [NoopAnimationsModule],
-  },
-});
-
-WithNoopBrowserAnimations.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const opened = canvas.getByText('The box is now Open!');
-  expect(opened).toBeDefined();
-  const submitButton = canvas.getByRole('button');
-  await userEvent.click(submitButton);
-  const closed = canvas.getByText('The box is now Closed!');
-  expect(closed).toBeDefined();
-};