Storybook and angular library: Cannot read property 'selector' of undefined

[anuragpathak21]

Describe the bug
Added story within component folder for Angular 13.2.5 component library, while using storybook, it shows me the error as below:

Cannot read properties of undefined (reading 'selector')

To Reproduce

System
Environment Info:

System:
OS: Windows 10 10.0.19044
CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
Binaries:
Node: 16.14.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.19.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 8.3.1 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 98.0.4758.102
Edge: Spartan (44.19041.1266.0), Chromium (98.0.1108.62)
npmPackages:
@storybook/addon-actions: ^6.4.19 => 6.4.19
@storybook/addon-essentials: ^6.4.19 => 6.4.19
@storybook/addon-interactions: ^6.4.19 => 6.4.19
@storybook/addon-links: ^6.4.19 => 6.4.19
@storybook/angular: ^6.4.19 => 6.4.19
@storybook/builder-webpack5: ^6.4.19 => 6.4.19
@storybook/manager-webpack5: ^6.4.19 => 6.4.19
@storybook/testing-library: ^0.0.9 => 0.0.9

Additional context
The stories are kept outside the .stories folder.

[NewPendragon]

same behaviour with Angular 13.3.0 and storybook 6.5.0-alpha.57 when used with component library

[atropo]

This one relates to #14828

I've got the same behaviour with Storybook 6.5.0-alpha.60 and angular:

Angular CLI: 13.3.1
Node: 16.14.2
Package Manager: npm 8.5.0
OS: linux x64

Angular: 13.3.1
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1303.1
@angular-devkit/build-angular   13.3.1
@angular-devkit/core            13.3.1
@angular-devkit/schematics      13.3.1
@schematics/angular             13.3.1
ng-packagr                      13.3.0
rxjs                            7.5.5
typescript                      4.6.3

I've tried to move the stories inside the ./stories directory but I got the same error. I've also tried to follow the guide https://dev.to/saulodias/angular-library-storybook-44ma to have Storybook loading the source code of the components and not the compiled version.

[atropo]

It looks like that Storybook cannot read the metadata of the component, the error happens in this part of code:

exports.computesTemplateFromComponent = (component, initialProps, innerTemplate = '') => {
    const ngComponentMetadata = NgComponentAnalyzer_1.getComponentDecoratorMetadata(component);
    const ngComponentInputsOutputs = NgComponentAnalyzer_1.getComponentInputsOutputs(component);
    if (!ngComponentMetadata.selector) {
        // Allow to add renderer component when NgComponent selector is undefined
        return `<ng-container *ngComponentOutlet="storyComponent"></ng-container>`;
    }

inside ComputesTemplateFromComponent.js

[anuragpathak21]

Looks like the issue only happens on Windows, I ran the same code in Mac and it's magically working.

[fdabrowski]

I'm facing the same issue with angular 13.3.9, stories files outside of .stories dir. Any updates?

[GabrielMSharp]

Same issue here, Angular 13.3.6

[GabrielMSharp]

I found that I have some dependencies (Style Dictionary + SVGO) installed within my Angular Library project, rather than the top-level workspace.

Moving these back to the workspace has fixed this issue for me.

[shilman]

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if:

• this is still a problem in SB 7.x
• you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).

[anuragpathak21]

We gave up on storybook for now.

[shilman]

@anuragpathak21 Sorry to hear that! FYI we've made a bunch of Angular-specific improvements in SB7 if you're ever interested in giving it another shot.

[bogdanmantaluta]

@shilman Hi! I am still having the same problem on Angular 15.2.0 and storybook 7.0.20.
I am too trying to integrate storybook on an Angular library inside of a project.

[lchaglla]

I got it to work by removing the node_modules folder from my Angular Library project.

I believe the issue was located here

export const getComponentDecoratorMetadata = (component: any): Component | undefined => {
  const decorators = reflectionCapabilities.annotations(component);

  return decorators.reverse().find((d) => d instanceof Component);
};

There are two Component decorators: one from my Angular Library project and the other from the top-level workspace. That's why d instanceof Component evaluates to false.

[Goyinho8]

@shilman , we are also facing issue with angular 15.2.0 and storybook 7.2.3, perhaps issue should be reopened or any workaround provided. Is there any thread where we can follow up in case of solutions?

Thanks in advance.
Regards!

[Rory-Gaddin]

I encountered a similar issue when trying to develop an Angular library using Angular 14.x and Storybook 7.4. Everything was working fine until I included @angular/material into the library's package.json as a dependency.

What eventually worked for me was to move all @angular dependencies (core, common, material, cdk) to the peerDependencies section of the package.json in the library, and to install them as dependencies in the root workspace instead. This just means that anyone using my library will need to ensure that those dependencies are installed, but in my case that is indeed expected.

[evtk]

@shilman Can this be reopened? We are encountering the exact same problem after upgrading to NG17. We are on the latest version of Storybook (7.6.0).

[valentinpalkovic]

@evtk, @Rory-Gaddin, @Goyinho8
Please take a look at my comment in #14828 (comment)

I hope it helps you to adjust your mono repo setup, so that this issue doesn't occur anymore.