storybook [Bug]:SB@6.5.16在文档或画布iframe中无法渲染Angular 15组件

dffbzjpn 于 6个月前发布在 Angular

关注(0)|答案(6)|浏览(79)

描述bug

你好！在将我的设置迁移到使用Angular 15.1.5、Storybook 6.5.16和Webpack 5之后，我终于能够构建完整的应用程序了🎉🎉🎉

然而，似乎SB的iframes没有正确地在文档或画布页面上渲染Angular组件，并且我看到了一个JIT编译错误：
Errors during JIT compilation of template for FieldComponent: Opening tag "label\n" not terminated. ("export default "[ERROR ->]<label\n *ngIf=\"!!_labelChildren?.length\"\n class=\"field-label typography-component-input-label\"): ng:///FieldComponent/template.html@0:16, Opening tag "ng-content" not terminated. ("abled ? 'field-label-disabled' : ''\n ]\"\n [attr.for]=\"_control.id\"\n [id]=\"_labelId\"\n>\n [ERROR ->]<ng-content select=\"halo-field-label\"></ng-content>\n <span\n class=\"field-label-required\"\n "): ng:///FieldComponent/template.html@0:366, Unexpected closing tag "ng-content". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags
这个错误对于使用Angular的多插槽内容投影样式的每个组件都会重复出现。

组件示例：
<ng-content select="field-label"></ng-content> .
实现示例：
<field-label>Label</field-label>
堆栈跟踪中提到的组件在迁移之前是工作的，现在在一个单独的ng 15应用程序消费测试中也是工作的。

重现问题

-- 使用文档中的脚本迁移SB
-- 使用文档中的脚本和指南迁移NG
-- 升级到Webpack 5.75.0
-- 升级到Typescript 4.9.5

系统信息

Environment Info:

  System:
    OS: macOS 13.1
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.15.0/bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
  Browsers:
    Chrome: 105.0.5195.125
    Edge: 110.0.1587.57
    Firefox: 109.0.1
    Safari: 16.2
  npmPackages:
    @storybook/addon-actions: ~6.5.16 => 6.5.16
    @storybook/addon-essentials: ~6.5.16 => 6.5.16
    @storybook/addon-links: ~6.5.16 => 6.5.16
    @storybook/addons: ~6.5.16 => 6.5.16
    @storybook/angular: ~6.5.16 => 6.5.16
    @storybook/builder-webpack5: ~6.5.16 => 6.5.16
    @storybook/manager-webpack5: ~6.5.16 => 6.5.16
    @storybook/theming: ~6.5.16 => 6.5.16

storybook

来源：https://github.com/storybookjs/storybook/issues/21358

6条答案

按热度按时间

vbopmzt11#

重复的#21336。

赞(0）回复(0）举报 6个月前

mlmc2os52#

Hi @valentinpalkovic - 我查看了这个问题，我不认为这是#21336的重复。
我没有收到相同的错误，我的Storybook在构建时没有错误。我提到的错误是iframe渲染我的组件时的运行时错误：

关于行为的一些更多信息：当我导航到文档和其他故事时，组件最终会通过多次点击进行渲染。它似乎在页面加载时无法正确渲染。

赞(0）回复(0）举报 6个月前

0sgqnhkj3#

你是对的。我判断得太早了。
但是我认为答案会在这里相同。我们将不再调查Angular 15的问题在6.5,因为7.0的发布就在眼前。请尝试升级到最新的7.0 beta并再次尝试，因为我们在与Angular相关的改进方面做了很多工作，并在SB 7.0中添加了对Angular 15的官方支持。
如果你有兴趣升级到SB 7.0,请遵循迁移指南：
https://chromatic-ui.notion.site/Storybook-7-migration-guide-dbf41fa347304eb2a5e9c69b34503937

赞(0）回复(0）举报 6个月前

w46czmvw4#

@shilman, 你能请移除 duplicate 标签吗？这个问题与 #21336 分开处理。
我正在继续针对 6.5.16 和 Storybook 7 运行测试，如果有任何变化，我会更新这个帖子。
谢谢！

赞(0）回复(0）举报 6个月前

t40tm48m5#

当然可以！

赞(0）回复(0）举报 6个月前

k5ifujac6#

我遇到了相同的错误，不确定你的上下文是否相同。但在我的案例中，我试图将一个函数作为参数传递。以下是我如何解决它的方法：

问题:

const permitValueChangeSync = () => {
  return window.confirm('Text');
};

export const WithConfirmationDialog: StoryObj<ListComponent<Item>> = {
  args: {
    permitValueChange: permitValueChangeSync
  }
};

修复:

const permitValueChangeSync = () => {
  return window.confirm('Text');
};

export const WithConfirmationDialog: StoryObj<ListComponent<Item>> = {
  args: {
    permitValueChange: permitValueChangeSync.bind(this) // <-- use .bind()
  }
};

赞(0）回复(0）举报 6个月前

我来回答

storybook [Bug]:SB@6.5.16在文档或画布iframe中无法渲染Angular 15组件

描述bug

重现问题

系统信息

6条答案

相关问题

热门标签

最新问答