Angular: Deprecate the story component attribute

MIGRATION.md

@@ -1,6 +1,7 @@
 <h1>Migration</h1>
 
 - [From version 6.1.x to 6.2.0](#from-version-61x-to-620)
+  - [Deprecated Angular story component](#deprecated-angular-story-component)
   - [New Angular renderer](#new-angular-renderer)
 - [From version 6.0.x to 6.1.0](#from-version-60x-to-610)
   - [Addon-backgrounds preset](#addon-backgrounds-preset)
@@ -143,9 +144,34 @@
 
 ## From version 6.1.x to 6.2.0
 
+### Deprecated Angular story component
+
+Storybook 6.2 for Angular uses `parameters.component` as the preferred way to specify your stories' components. The previous method, in which the component was a return value of the story, has been deprecated.
+
+Consider the existing story from 6.1 or earlier:
+
+```ts
+export default { title: 'Button' };
+export const Basic = () => ({
+  component: Button,
+  props: { label: 'Label' },
+});
+```
+
+From 6.2 this should be rewritten as:
+
+```ts
+export default { title: 'Button', component: Button };
+export const Basic = () => ({
+  props: { label: 'Label' },
+});
+```
+
+The new convention is consistent with how other frameworks and addons work in Storybook. The old way will be supported until 7.0. For a full discussion see https://github.com/storybookjs/storybook/issues/8673.
+
 ### New Angular renderer
 
-We've rewritten the Angular renderer in Storybook 6.1. It's meant to be entirely backwards compatible, but if you need to use the legacy renderer it's still available via a [parameter](https://storybook.js.org/docs/react/writing-stories/parameters). To opt out of the new renderer, add the following to `.storybook/preview.ts`:
+We've rewritten the Angular renderer in Storybook 6.2. It's meant to be entirely backwards compatible, but if you need to use the legacy renderer it's still available via a [parameter](https://storybook.js.org/docs/react/writing-stories/parameters). To opt out of the new renderer, add the following to `.storybook/preview.ts`:
 
 ```ts
 export const parameters = {
@@ -162,6 +188,7 @@ Please also file an issue if you need to opt out. We plan to remove the legacy r
 In 6.1 we introduced an unintentional breaking change to `addon-backgrounds`.
 
 The addon uses decorators which are set up automatically by a preset. The required preset is ignored if you register the addon in `main.js` withe the the `/register` entry point. This used to be valid in `v6.0.x` and earlier:
+
 ```js
 module.exports = {
   stories: ['../**/*.stories.js'],

addons/storyshots/storyshots-core/package.json

@@ -55,10 +55,12 @@
     "react-test-renderer": "^16.8.0 || ^17.0.0",
     "read-pkg-up": "^7.0.0",
     "regenerator-runtime": "^0.13.7",
+    "rxjs": "^6.6.3",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
     "@storybook/addon-docs": "6.2.0-alpha.5",
+    "@storybook/angular": "6.2.0-alpha.5",
     "@storybook/react": "6.2.0-alpha.5",
     "babel-loader": "^8.0.6",
     "enzyme": "^3.11.0",
@@ -68,6 +70,7 @@
     "jest-vue-preprocessor": "^1.5.0"
   },
   "peerDependencies": {
+    "@storybook/angular": "*",
     "@storybook/react": "*",
     "@storybook/vue": "*",
     "jest-preset-angular": "*",
@@ -80,6 +83,9 @@
     "@storybook/vue": {
       "optional": true
     },
+    "@storybook/angular": {
+      "optional": true
+    },
     "jest-preset-angular": {
       "optional": true
     },

addons/storyshots/storyshots-core/src/frameworks/angular/renderTree.ts

@@ -4,38 +4,36 @@ import HTMLCommentSerializer from 'jest-preset-angular/build/HTMLCommentSerializ
 import { TestBed } from '@angular/core/testing';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { addSerializer } from 'jest-specific-snapshot';
-import { initModuleData } from './helpers';
+import { RenderNgAppService } from '@storybook/angular/dist/client/preview/angular-beta/RenderNgAppService';
+import { BehaviorSubject } from 'rxjs';
 
 addSerializer(HTMLCommentSerializer);
 addSerializer(AngularSnapshotSerializer);
 
 function getRenderedTree(story: any) {
   const currentStory = story.render();
 
-  const { moduleMeta, AppComponent } = initModuleData(currentStory);
-
-  TestBed.configureTestingModule(
-    // TODO: take a look at `bootstrap` because it looks it does not exists in TestModuleMetadata
-    {
-      imports: [...moduleMeta.imports],
-      declarations: [...moduleMeta.declarations],
-      providers: [...moduleMeta.providers],
-      schemas: [NO_ERRORS_SCHEMA, ...moduleMeta.schemas],
-      bootstrap: [...moduleMeta.bootstrap],
-    } as any
+  const moduleMeta = RenderNgAppService.getNgModuleMetadata(
+    { storyFnAngular: currentStory, parameters: story.parameters },
+    new BehaviorSubject(currentStory.props)
   );
 
+  TestBed.configureTestingModule({
+    imports: [...moduleMeta.imports],
+    declarations: [...moduleMeta.declarations],
+    providers: [...moduleMeta.providers],
+    schemas: [...moduleMeta.schemas],
+  });
+
   TestBed.overrideModule(BrowserDynamicTestingModule, {
     set: {
       entryComponents: [...moduleMeta.entryComponents],
     },
   });
 
   return TestBed.compileComponents().then(() => {
-    const tree = TestBed.createComponent(AppComponent);
+    const tree = TestBed.createComponent(moduleMeta.bootstrap[0] as any);
     tree.detectChanges();
 
     return tree;

app/angular/package.json

@@ -56,8 +56,10 @@
     "regenerator-runtime": "^0.13.7",
     "sass-loader": "^8.0.0",
     "strip-json-comments": "3.1.1",
+    "ts-dedent": "^2.0.0",
     "ts-loader": "^6.0.1",
     "tsconfig-paths-webpack-plugin": "^3.2.0",
+    "util-deprecate": "^1.0.2",
     "webpack": "^4.44.2"
   },
   "devDependencies": {