如何在 Storybook 中使用 Ag-grid

Question

我已经设置了要在 Storybook 中呈现的 ag-grid。然而，当 Storybook 出现时，没有任何显示，并且 Chrome 控制台中显示以下错误：

ERROR Error: StaticInjectorError(DynamicModule)[Ng2FrameworkFactory -> BaseComponentFactory]: 
StaticInjectorError(Platform: core)[Ng2FrameworkFactory -> BaseComponentFactory]: 
NullInjectorError: No provider for BaseComponentFactory!
    at NullInjector../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1034)
    at resolveToken (core.js:1271)

我怀疑这是因为 Storybook 模块中的 ag-grid 设置不正确。以下是我的设置方式 - 使用 Strorybook 装饰器：

import { AgGridNg2 } from 'ag-grid-angular';
...

storiesOf('Order List', module)
    .addDecorator(
        moduleMetadata({
            declarations: [AgGridNg2]
        })
    )
    .add('list with orders', () => ({
        component: OrderListComponent,
        props: {
            orders: orders
        }
    }));

知道我做错了什么吗？完整项目可在 Github, specifically the Storybook story is here.

上获得

Answer 1

已解决。我必须将 AgGridModule 导入故事书：

.addDecorator(
    moduleMetadata({
        imports: [AgGridModule.withComponents([])]
    })
)

如何在 Storybook 中使用 Ag-grid

How to make Ag-grid work in Storybook

ag-grid

ag-grid-ng2

angular

storybook