问题标签 [angular-storybook]

我正在尝试制作一个使用将 aTemplateRef作为@Input. 但我不知道怎么做。

测试组件

故事

我尝试了很多东西，它们与下面的类似。这真的没有意义。

在 npm run storybook 时使用 Primeng 模板在我的 Angular 项目中运行 Storybook 时，会发生以下错误，我无法继续

我正在尝试为高级角度组件编写一个故事，该组件具有许多可能的子组件，具体取决于输入数据。

我最终不得不列出故事中的所有组成部分，如下所示：

由于所有这些子组件都已在 中声明app.module.ts，我是否可以避免像上面显示的那样再次列出所有这些子组件my-component.stories.ts？

组件列表很快就会变得很长，因为其中许多组件都有自己的子组件，如果我忘记维护此列表，故事会呈现错误但没有任何错误，并且查找缺少哪些组件可能会很烦人declarations.

我希望在.stories.ts我们运行后在组件文件夹中生成一个文件ng g component my-component。

最终结果应该看起来像这样：

到目前为止，我发现一个PR似乎已经解决了关于使用 angular 和 storybook 的问题，但我找不到明确告诉我如何做到这一点的东西

我遇到的另一个解决方案是创建自己生成这个额外文件的脚本，这样我就可以运行类似： ng g component my-component && node generate-story-file.js my-component

有谁知道是否有其他解决方案？

谢谢

我正在尝试将 Storybook 用于 Angular 项目。Angular 项目在整个组件模板中使用了 Kendo UI 的剑道网格元素。

问题是当我运行它时，使用 kendo 元素的任何组件模板都不会显示在 Storybook 界面中。如果我更改为标准 html 元素，数据会按预期显示。

我的哪些设置不正确导致这些自定义元素无法在 Storybook 中显示？

任何帮助或想法将不胜感激，并很乐意为任何事情提供更多背景信息。下面的一些代码示例。

版本
@angular/core - ^12.1.0
@progress/kendo-angular-grid - ^5.4.0
@storybook/angular - ^6.3.4

.storybook/main.js 文件

组件故事

组件模板文件

我将在 Angular 12 下使用 Storybook 安装快照测试。我安装 jest$ yarn add --dev jest jest-preset-angular @types/jest并进行设置

并设置 setupJest.ts 数据只有一行import 'jest-preset-angular/setup-jest';。

那是开玩笑的设置。这对我有用。

问题是来自 Storybook 的 Storyshorts 插件。我安装 Storyshorts并使用以下代码yarn add @storybook/addon-storyshots --dev创建文件：src/storyshorts.test.js

jest当我在我的 Angular 项目中运行命令时，我变成了这个错误：

我的 Package.json 有以下条目：

和 Angular 12 包。

My Angular storybook was working perfectly fine, but i added a compoenent, tried to re-generate storybook and started getting followoing error

我正在尝试在现有的 Angular 8 应用程序上安装 Storybook 6.3.12。

我做了“npx sb init”没有问题。在尝试构建故事书后，我遇到了“javascript heap out of memory”错误。
我发现 package.json 上的“docs:json”脚本正在使用我的应用程序 tsconfig 而不是 story/tsconfig。
在修复它并删除一些 jsDoc 注释后，我成功地通过了 compodoc 阶段。

但是现在我遇到了另一个问题，
storybook 正在尝试编译我的一个依赖项和中断。

1. 为什么它试图编译我的项目依赖项？
2. 甚至在我从 package.json 中删除它之后，为什么它还要编译我的依赖项？
3. 这是一个本地依赖，在 package.json 依赖块中的含义：
   "@myapp-firstModule": "file:libs/my-package-0.0.20.tgz"
   这是问题吗？

错误消息如下所示：

info @storybook/angular v6.3.12
info
info => 清理 outputDir: C:\dev\master\myapp\storybook-static
info => 加载预设
信息 => 编译预览..
info => 在“C: \dev\master\myapp.storybook"
info => 在 "C:\dev\master\myapp.storybook" 中加载 9 个其他文件
info => 添加在 "C:\dev\master\myapp.storybook\main. js"
info => 发现自定义 tsconfig.json 正在
编译 @myapp-first-module/create-fine-dialog : fesm2015 as esm2015
ERR！致命诊断错误 {
错误！代码：1010，
错误！节点：
错误！节点对象 {
错误！位置：46305，
错误！结束：46492，
错误！标志：65536，
呃！修改器标志缓存：0，
错误！转换标志：536870912，
错误！家长：
ERR！节点对象 {
错误！位置：46279，
错误！结束：46492，
错误！标志：65536，
错误！修改器标志缓存：536870912，
错误！转换标志：536870912，
错误！父：[NodeObject]，
错误！种类：276，
错误！装饰器：未定义，
错误！修饰符：未定义，
ERR！名称：[标识符对象]，
错误！questionToken：未定义，
错误！exclamationToken：未定义，
错误！初始化程序：[循环]，
错误！符号：[SymbolObject] }，
呃！种类：188，
ERR！多行：是的，
错误！要素：
ERR！[标识符对象]，
错误！[节点对象]，
错误！[标识符对象]，
错误！位置：46307，
错误！结束：46473，
错误！转换标志：536870912]}，
错误！消息：
错误！'MyInternalModule 的 NgModule.imports 中位置 2 的值不是引用：[object Object]'，
错误！_isFatalDiagnosticError: true }
npm 错误！代码 ELIFECYCLE
npm 错误！errno 1
npm 错误！myapp@0.0.0 bk：build-storybook
npm 错误！退出状态 1
npm ERR！
npm 错误！在 myapp@0.0.0 bk 脚本中失败。npm 错误！这可能不是 npm 的问题。上面可能有额外的日志输出。

谢谢。

让我们考虑一个 Angular (12.2.12) 项目，它使用 Angular Universal 和 Node.js Express Web 服务器进行一些服务器端渲染。基本上我们可以在SSR Angular 文档中找到。它还使用Storybook (6.3.12)。

在我想在 Storybook 中使用的其他组件中，这里是http-error.component.ts：

该组件在应用程序中执行时运行良好。但是最近，在运行之后npm run storybook，这个组件没有显示在 Storybook 菜单栏中，我可以在控制台中看到以下错误：

这是tsconfig.jsonStorybook 使用的：

我的.storybook/main.js看起来像这样：

其中的webpackFinal内容对 Webpack 4 处理express以及来自它的一些错误很有用。我倾向于相信我需要找到一种方法来做同样的事情，但使用 Webpack 5；但我的分析可能不对。

到目前为止，我已经尝试了很多事情，但没有通过config.externals手动修改它成功，使用webpack-node-externals，在 SO 或 GitHub 中寻找答案，但显然，我迷路了。也许答案很简单，就在我面前，但我看不到。所以，我希望能在这个问题上提供一些帮助。

我正在运行 @storybook/angular": "5.3.14"

我的 addons.js 文件：

showNav: false showPanel: false- 这两个设置正确隐藏了左侧导航和面板，但toolbar设置不起作用。我继续看到工具栏按钮

StorybookJS 不是我的强项，我继承了一个项目。谁能告诉我哪里出错了？