问题标签 [angular-storybook]

我正在尝试按照在此处输入链接描述storybook中的步骤进行集成

但出现以下错误：

有人帮我吗？

我有一个相对简单的角度组件，它使用角度材料组件 - 特别是 mat-menu。

创建故事时，出现运行时错误：

我假设我必须导入 MatMenuModule，但我不知道该怎么做。这是我的故事：

我也尝试将导入直接放入 Testheader 中，但都没有。如果我使用 storiesOf API，我可以这样做：

但我不知道 CSF 中的格式。请帮忙！

我有一个简单的角度组件，它使用<ng-content>. 我试图把它放在故事书中，但我无法弄清楚用变量指定内容的语法。这是我现在拥有的：

这可以正常工作，但我真正想做的是将该内容绑定到一个变量，如下所示：

可悲的是，这不起作用。当我尝试它时，内容是空的。什么是正确的语法？

Github：https ://github.com/danielhdz56/storybook-demo.git

在组件中注入服务总是会在故事书中引发错误：

一个示例组件：

routerLink由于错误，无法为使用的模块配置故事

ERROR NullInjectorError: StaticInjectorError(DynamicModule)[RouterLinkActive -> Router]

重现行为的重现步骤： demo-app 运行应用程序，您可以测试没有可能的解决方案来添加 RouterModule 以使用故事。不能用RouterTestingModule, RouterModule,RouterModule.forRoot和iframe.html路径配置。缺少提供程序总是存在相同的错误。

预期行为 使用 routerLink 运行应用程序和故事

附加上下文最新版本的故事书5.3.3和角度~8.2.14 我正在使用不同的配置 5.2.8，并且没有出现此问题。

如何配置这个模块，故事书有问题吗？

故事书问题

我想为使用 ng-bootstrap 的 Angular 组件创建故事。但是，当我为此示例代码制作这些故事时（所有组件都在工作，只有故事书会给出错误）

我收到以下错误。

无法绑定到“ngbCollapse”，因为它不是“div”的已知属性。

我如何制作一个支持这一点的基本故事

当我尝试将故事书添加到现有的 Nrwl Nx monorepo 角度应用程序时出现以下错误。

我使用的命令是nx g @nrwl/angular:storybook-configuration <project name>

我正在使用 Angular 探索 Nx（两者都相对较新）并试图弄清楚如何生成一个组件库：

• 可以运行 Storybook，并且
• 可以一次导入一个组件，而不是将整个模块/所有组件拖到需要单个组件的应用程序中。（为了避免在我的包中添加不必要的代码/膨胀）。

所以理想的设置是这样的：

遵循展示如何创建共享组件库的通用 Nx 教程，以及在 Nx 中设置 Storybook的指南，我生成了一个 UI 库，并设置了一个 Storybook 示意图（如果这是正确的说法）对于那个 lib 目录。

希望将我所有的共享组件放在一个库中，并将 Storybook 设置为自动生成并为每个组件提供故事——但随后能够单独将组件从该库拉入其他应用程序，而无需拉入整个庞大的 UI图书馆。

我成功地构建了一个 UI 库和其中的两个组件。我在该库中成功设置了 Storybook。然后，我UIModule从index.tsUI 库中的文件（公共 API）导入，并在我的模板中使用了两个组件之一。

但是当我构建导入 lib 的应用程序时，生产构建包含两个组件，尽管我使用了一个。这是有道理的，因为我正在导入UiModule. 然而，这是不理想的。

我希望创建一个设置，允许在带有 Storybook 设置的库中并置组件，可以单独导入。

有没有办法在不彻底改变 NX 设置的情况下做到这一点？到目前为止，我已经探索了两个主要选项。一种是将所有组件分解为它们自己的 UI 库，将它们全部导入为 Storybook 设置的单独应用程序中，然后将它们单独导入到主应用程序中。像这样（尝试＃1）：

但是，这并不理想，原因如下：

• 它不会对组件进行分组。
• 它涉及更多的 lib 样板。
• 它不会为每个组件自动生成故事。
• 它要求开发人员记住为每个组件添加一个故事到故事书中。

作为第二次尝试（#2），我尝试将每个组件生成为共享目录中的单独库：

这有其自身的许多缺点：

• 仍然无法自动生成故事。
• 不清楚我的故事书应该放在哪里。它是一个独立的应用程序，如上面的树形图吗？这似乎不习惯。我试图把它放在ui目录中，但由于这不是一个“项目”，所以Cannot find project 'ui'当我尝试使用 VSCode NX 扩展名时，我得到了一个。
• 我必须为每个 UI 组件在一个库中生成一个库和一个组件。这是额外的样板和额外的代码以及额外的错误机会。
• 在我看来，Storybook 不应该是一个应用程序，因为它可以正常服务，但有自己的服务命令。

我可以构建上述版本之一（可能是#2），但我怀疑对于看似常见的用例有最佳实践。看来我的大部分困惑源于 Angular 依赖注入。（在 React 应用程序中，您可以只导入一个组件，但在 Angular 中，每个组件都属于一个模块，并且特别需要注入。拥有特定于组件的模块是一种不好的做法吗？）

有谁知道满足这些理想规范的惯用/最佳实践方式（与单个导出组件共享故事书库，或在 NX 中使用自动生成的故事拆分组件）？

我正在用 Storybook 构建一个 Angular 应用程序。我希望我的故事有可控的旋钮，但其中一些组件需要ng-content.

我无法让这两者一起工作，因为根据我的发现，使用 Storybook 将内容传递到组件涉及template在故事上设置 a。不幸的是，模板似乎基本上覆盖了 Storybook 的旋钮传递道具。

这是示例：

button.component.ts

button.component.html

button.component.stories.ts

我是否错过了传递内容的更好方法？因为我必须给出一个完整的template，所以似乎没有在该模板中传递的任何道具都没有注入到组件中，因此旋钮变得无用。这似乎意味着我应该摆脱所有组件故事中的道具，而只是通过模板传递它们，但这会使它们在所服务的故事书中无法配置，并且在很大程度上失去了意义。

我做错了吗？有没有办法既 A）传递内容，又 B）允许道具？Angular Storybook 指南似乎没有解决这个问题。

我正在尝试将故事书集成到我使用和设计图书馆的角度项目中。Storybook 运行良好，但 antd 样式没有加载到故事中。它仅显示默认元素。我用谷歌搜索了很多可能性，几乎没有关于和角度的。我知道我们以某种方式用 antd 库包装了这些故事。请给我指路。如果我们已经有一个例子，那就太好了。提前致谢。