help(ScrollingModule): Can't use Angular Material module in Storybook

[AndrewAKovalenko]

What are you trying to do?

Add virtual scrolling component into my component library (Storybook)

What troubleshooting steps have you tried?

I tried complete removing of node_modules and reinstallation
Component is not present in Storybook, but if i try it in application itselt - it works fine
It appears both in View Engine and Ivy mode for my library

Reproduction

1. Create component with ScrollingModule
2. Create Storybook story with that component
3. Observe console and component on canvas

ER: Component is present on canvas, no errors in console
AR: Canvas is empty, error in consol

Component template

<cdk-virtual-scroll-viewport
    [itemSize]="50"
    [style.height]="'200px'">
    <div *cdkVirtualFor="let item of [1,2,3,4,5,6,7,8,9]"
         [style.height]="'50px'">
        {{ item }}
    </div>
</cdk-virtual-scroll-viewport>

Module itself

@NgModule({
    declarations: [VirtualScrollComponent],
    imports: [
        CommonModule,
        ScrollingModule,
    ],
    exports: [VirtualScrollComponent],
})
export class VirtualScrollModule {
}

Storybook story

export default {
    title: 'Components/Virtual Scroll',
    decorators: [
        withKnobs,
        moduleMetadata({
            imports: [VirtualScrollModule],
        }),
    ],
};

export const Default = () => ({
    template: `
        <app-virtual-scroll
            [items]="items"
            [itemSize]="itemSize"
            [itemTemplate]="itemTemplate"
            [viewportHeight]="viewportHeight">
        </app-virtual-scroll>
    `,
    props: {
        itemSize: number('Item size', 50),
        viewportHeight: number('Viewport height', 300),
        items,
    },
});

Environment

• Angular: 11.2.14
• CDK/Material: 11.2.13
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[crisbeto]

It's hard to tell what is going on without looking at the setup, but it's most likely a build issue, rather than an issue with the CDK. The error you posted above is thrown when the module hasn't been compiled correctly (e.g. when ngcc didn't run). Alternatively, it would be worth checking that you don't have a version mismatch between Angular and the CDK. The versions don't have to be exactly the same, but the major versions have to align.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}