标签: angular-storybook

我已将 Angular 从 更新为11至12，并将我的 中的所有软件包更新为最新版本package.json：

    {
      "name": "poc-architecture-angular",
      "version": "0.0.0",
      "scripts": {
        "ng": "ng",
        "start": "ng serve --host 0.0.0.0  --port 4200",
        "build": "NODE_ENV=production ng build --prod",
        "build:dev": "NODE_ENV=production ng build --source-map=true --prod",
        "build:local": "ng build --watch --output-path /usr/share/nginx/html && tar -zcvf archive.tar.gz dist/prod/*",
        "test": "ng test",
        "test:coverage": "ng test --no-watch --code-coverage --browsers ChromeHeadlessNoSandbox",
        "lint": "ng lint",
        "e2e": "ng e2e",
        "stylelint": "stylelint --fix \"src/**/*.scss\" --config .stylelintrc.json",
        "stylelint:diff": "stylelint \"src/**/*scss\" --config .stylelintrc.json",
        "format": "prettier --write \"src/app/**/*.{ts,html,scss}\"", …

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

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

    Error: Template parse errors:
Can't bind to 'matMenuTriggerFor' since it isn't a known property of 'button'. ("
        </li>
        <li class="nav-item">
          <button class="menubtn" mat-icon-button [ERROR ->][matMenuTriggerFor]="menu">
            <span class="fa-stack fa-md">
              <i class="fa fa-g"): ng:///DynamicModule/VeradigmHeaderComponent.html@33:50
There is no directive with "exportAs" set to "matMenu" ("
            </span>
          </button>
          <mat-menu [ERROR ->]#menu="matMenu" xPosition="before">
            <button mat-menu-item (click)="setLoc('en_US')">en-US"): ng:///DynamicModule/VeradigmHeaderComponent.html@38:20
'mat-menu' is not a known element:
1. If 'mat-menu' is an Angular component, then verify that it is part of this module.
2. …

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

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

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

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

附加上下文 最新版本的 storybook5.3.3和 angular~8.2.14 我正在使用不同的配置 5.2.8，这个问题没有出现。

这个模块怎么配置，storybook有问题吗？

故事书问题

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

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

这是示例：

button.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'ui-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss']
})
export class ButtonComponent implements OnInit {
  types: String[] = [];

  constructor() {}

  ngOnInit(): void {}

  typeClasses(): String[] {
    return this.types.map(t => `button--${t}`);
  }
}

按钮.component.html

<a class="button" [ngClass]="typeClasses()">
  <ng-content></ng-content>
</a>

button.component.stories.ts

import { text, array } from '@storybook/addon-knobs';
import { ButtonComponent } from './button.component';

export …

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

最终结果应该是这样的：

my-component

  -my-component.component.html

   .

   .

   .

  -my-component.stories.ts

到目前为止，我发现的是一个PR，它似乎解决了使用 Angular 和 Storybook 的问题，但我找不到明确告诉我如何做到这一点的东西

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

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

谢谢

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

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

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

repo
 |--apps
    |--normal-app (can import just card or button, without pulling in both)
 |--libs
    |--ui (lists individually exportable components, and has a servable Storybook)
       |--.storybook
       |--card
       |--button

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

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

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

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

我希望创建一个安装程序，它允许在童话建立一个lib置的组件，可以导入独立。

有没有办法在不彻底改变 NX 设置的情况下做到这一点？到目前为止，我已经探索了两个主要选项。一种是将所有组件分解为自己的 UI …

我正在尝试制作一个使用将 a 作为 的组件的TemplateRef故事@Input。但我不知道怎么做。

测试组件

@Component({
  selector: 'test',
  templateUrl: './test.component.html',
})
export class TestComponent {
  @Input() public set value(value: TemplateRef<void>) {
    // ...
  }
}

故事

export default {
  title: 'Components/Test',
  component: TestComponent,
} as Meta;

const Template: Story<TestComponent> = (args) => ({
  props: args,
});

export const TemplateRefStory = Template.bind({});
TemplateRefStory.args = {
  value: ???, // <-- what do I put here?
};

我尝试了多种方法，它们与下面的类似。这确实没有意义。

export const TemplateRef: Story<TestComponent> = (args) => ({
  template: `<ng-template #hello>Hello</ng-template>`, …

在将故事书迁移到最新版本时，我一直在遵循多个指南和在线故障排除。我收到此错误：

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }
resolve 'path' in …

如何订阅 Storybook for Angular 中的组件 Output？

例如，我有这样的组件及其输出操作：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-task',
  template: `
    <div class="list-item">
      <input type="text" [value]="task.title" readonly="true" />
    </div>
  `,
})
export class TaskComponent {
  @Input() task: any;

  // tslint:disable-next-line: no-output-on-prefix
  @Output()
  onPinTask = new EventEmitter<Event>();

  // tslint:disable-next-line: no-output-on-prefix
  @Output()
  onArchiveTask = new EventEmitter<Event>();
}

我还有该组件的 Storybook 文件：

import { Story, Meta } from '@storybook/angular/types-6-0';
import { action } from '@storybook/addon-actions';

import { TaskComponent } from './task.component';

export default { …

我正在尝试在应用程序中使用 Angular Material 库创建故事书nx，但我无法显示该库附带的样式。因此组件会呈现，但没有随之而来的样式。我已将组件添加到 Storybook 中，如下所示：

export default {
  title: 'Buttons',
  component: ButtonComponent,
  decorators: [
    moduleMetadata({
      imports: [
        MatButtonModule
      ],
    }),
  ]
} as Meta<ButtonComponent>;

此屏幕截图显示了主按钮，但没有获得正确的紫色样式。

我该如何将这样的内容导入 Storybook 以便主题得以体现？

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

这也是一个nx应用程序，所以没有angular.jsonaproject.json和 a workspace.json。我尝试将主题添加到project.json下面，但不起作用，我认为它需要以某种方式直接传递到故事书而不是在project.json内部（这将适用于应用程序本身而不是故事书）？

"build": {
      "options": {
        "styles": [
          "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
        ],
        "scripts": []
      }
    },

使用Angular Material "13.2.3"、"@nrwl/storybook": "13.8.3"，然后使用这些附加库：

"@storybook/addon-essentials": "6.5.0-alpha.41",
"@storybook/addon-knobs": "6.4.0",
"@storybook/addons": "^6.5.0-alpha.41",
"@storybook/angular": "6.5.0-alpha.41",
"@storybook/api": "6.5.0-alpha.41",
"@storybook/builder-webpack5": "6.5.0-alpha.41",
"@storybook/core-server": "6.5.0-alpha.41",
"@storybook/manager-webpack5": …