问题标签 [angular-storybook]

我正在使用Angular基于Storybook. 我想做的就是根据 Storybook 控件中给出的值重新渲染图表。但是即使在更改控件的值之后，图表仍然保持不变。我尝试了很多解决方法，但仍然处于第一阶段。我想显示的图表是一个等值线。我已经使用Chartjs和chartjs-chart-geo库来显示图表。

我在 Storybook 中的组件：

我的故事.ts：

在此，我想保持 URL 动态。由于故事书控件中的 URL 已更改，因此我想相应地重新渲染地图。任何帮助将不胜感激。

我正在尝试TranslateModule在我的 html（我自己的库）中使用，但是当我构建 Storybook（使用 Angular 和 webpack）时，我收到了这个错误：

Unhandled Promise rejection: Importing TranslateModule which does not have a ɵmod 即使当我点击TranslateModule我看到：

所以我怀疑这是我的 webpack 配置以及与故事书集成的问题。有任何想法吗？

这些是我使用的版本：

我Storybook.js在使用另一个名为NSwag TypeScriptClientGenerator的库时遇到问题。

所以我不确定这是一个错误还是我的配置错误，但这里有详细信息。

TLDR 版本：

NSwag 生成一个包含数百个类的巨大 API 客户端文件。然后Storybook.js在尝试加载所有这些类时崩溃

更多细节：

我正在开发一个使用 REST API 的 Angular 项目。这个 API 有很多端点，我使用NSwag它是为了对这个 API 调用进行编译检查。

NSwag阅读 API 描述（openAPI/swagger），然后生成一个 typescript 文件，描述所有 API 端点和所有参数和返回类型。

这会导致一个非常大的打字稿文件，其中包含很多接口/类/函数。生成的代码行超过 30k 行，文件为2mo.

现在来了 Storybook.js。当我运行npm run storybook该工具时，首先创建documentation.json文件。

该文件包含每个类/接口 1 个 json 条目，并且对于这些条目中的每一个，都有一个sourceCode包含文件源代码的成员。

问题是该sourceCode成员包含所有文件代码，而不仅仅是类或接口代码。

由于该文件包含数百个类和接口，因此所有这些类都在documentation.json文件中进行了描述，并且所有这些条目都包含一个sourceCode包含所有 30k 行代码的成员（在屏幕截图中，行601是1,599,000字符-> 有数百行像这在文件的其余部分）。

结果documentation.json文件大于700mo. 结果是故事书在尝试解析那个巨大的文件时崩溃了。

你有什么技巧可以解决这个问题吗？

问题：

是否可以告诉Storybook.js忽略此文件？如果是的话：这样做有什么缺点吗？

或者是否可以告诉Storybook.js不要创建此条sourceCode目？

或者也许可以要求 NSwag Typescript Generator 为每个类生成一个文件？

我尝试为我的角度组件创建一个带有故事书的故事。

我的问题是我的角度组件有一个 @Input() 到一个非常复杂的对象，并且不能转换为 json （递归依赖，方法，整个东西）。

由于未知原因，故事无法创建，但如果我传递一个不太复杂的对象作为输入，它就可以工作。

任何想法？

我正在尝试在 Storybook 中设置我的第一个组件。我能找到的所有示例都将整个 HTML 模板放在@Component({template: '...'})装饰器中，这样就可以了。但是，当我在 Angular 组件中使用模板的相对路径时，@Component({templateUrl: './<template path>'})会出现下面列出的错误。

我的目标是使用templateUrl而不是template因为我至少有一些具有重要 HTML 的组件。

错误

• GET http://localhost:6006/refresh-button.component.html 404（未找到）
• zone.js:1102 未处理的承诺拒绝：无法加载 refresh-button.component.html ；区域：; 任务：Promise.then；值：无法加载 refresh-button.component.html 未定义

刷新按钮.component.ts

刷新-button.component.html

刷新按钮.stories.ts

注意：当所有 HTML 都放入 Angular 组件时，模板可以工作，但“styleUrls”样式会以同样的方式失败。

我们无法将故事书安装到 NX 项目（最新版本）中，仅在 11.1.5 版本中有效，但无法启动，请按照以下步骤进行复制：

执行最后一个命令后故事书没有启动，也没有显示任何错误

我正在尝试为使用ion-*组件的 Ionic/Angular 应用程序组件创建故事。

这些组件有两种模式ios，md它们对来自的配置做出反应IonicModule：

问题是，我想/需要同时查看这两种模式，但我不知道如何展示两个不同moduleMetadata.imports的故事。

我这甚至可能吗？

我需要将“angular/storybook”项目重写为“HTML/storybook”项目。

在当前的 Angular 项目中，我可以运行“npm run ng serve”来构建项目并通过浏览器访问它。

对于新的 HTML/storybook 项目，我设置了 node.js 和 express。在这里，我得到了 Button 组件的以下文件（这些文件由一些示例代码给出）：Button.css、Button.js 和 Button.stories.js

Storybook 从这些 .js 文件中构建了此按钮的预览，但我不知道如何从这三个文件中构建/渲染我的应用程序，因此我可以在浏览器中看到例如此按钮。我是否需要创建一个额外的文件（html 或 .pug）或者我可以从这些 .js 文件中呈现我的 html 吗？

我希望这一切都有意义。也许我完全错了。谢谢

您知道是否可以删除组件下方的“显示代码”按钮？因为输出很奇怪。我正在使用包'@storybook/addon-docs'

我正在使用角度和故事书。我的模型中有一个 FormGroup 和 FormArray，但它们不适用于故事书。

a.stories.ts ->

我在故事书中遇到错误->

如果“formGroup”为空，它可以工作。->

但是如果“formGroup”不为空，它就不起作用。->

我怎样才能解决这个问题？