Angular 扩展

## Announcement

I have recently decided on splitting this addon into multiple other addons. So, we will be moving to @storybook-extras repo which will contain all the addons. This will make it easier to maintain and also to add new features. I will be working on this in the next few weeks.

This addon will be deprecated in favor of the new addons. And it will be pointing to the new addons for the features. So, you can still use it as it is. But, I will be adding new features to the new addons.

For more information the features and new addons, please refer to the documentation available at the [`@storybook-extras`](https://github.com/sheriffMoose/storybook-extras) repo.

功能

• ⚡️ 零配置设置。
• 📚 支持最新的 Storybook v7。
• 🅰️ 支持最新的 Angular v15。
• 📔 测试运行器的覆盖率测量工具
• 🧪 Angular 服务的自动注入器
• 🦥 懒加载文档
• 💬 源代码显示
• 🌯 Story Wrapper 选择器工具栏
• 💻 控制台日志面板
• 📃 自动 Markdown 和 HTML 文档支持
• 👨‍💻 Swagger/OpenAPI 集成

开始使用

1. 安装插件

yarn add @sheriffmoose/storybook-ngx -D

1. 添加插件

// .storybook/main.js
module.exports = {
    ...
    "addons": [
        "@sheriffmoose/storybook-ngx",
        ...
    ],
    ...
}

3. 请参考以下章节获取内置功能的文档。

演示/Chromatic

在 chromatic 上找到已发布的演示 storybook，请点击此处

迁移计划

这些功能各自拥有独立的插件，并且适用于所有框架。它们的功能与之前相同，但使用了新的名称和重构后的代码。

功能	之前	新插件
📔 测试运行器的覆盖率测量工具	@sheriffMoose/storybook-ngx	@storybook-extras/coverage
🧪 Angular 服务的自动注入器	@sheriffMoose/storybook-ngx	@storybook-extras/angular
🦥 懒加载文档	@sheriffMoose/storybook-ngx	@storybook-extras/angular
💬 源代码显示	@sheriffMoose/storybook-ngx	@storybook-extras/angular
🌯 Story Wrapper 选择器工具栏	@sheriffMoose/storybook-ngx	@storybook-extras/angular
📃 自动 Markdown 和 HTML 文档支持	@sheriffMoose/storybook-md	@storybook-extras/markdown
💻 控制台日志面板	原属于 @sheriffMoose/storybook-ngx	@storybook-extras/console
👨‍💻 Swagger/OpenAPI 集成	原属于 @sheriffMoose/storybook-ngx	@storybook-extras/swagger

鸣谢

• 感谢 JS Devtools 提供了出色的 coverage istanbul loader，我们也在努力将这个测量工具集成到 @storybook/addon-coverage 中。
• 感谢 @storybook/addon-backgrounds 为 wrapper selector 功能提供了灵感。
• 如果没有官方的 @storybook/angular 框架，这一切都不可能实现。
• 感谢官方 Storybook Addon Kit 背后的团队，特别是 @winkerVSbecks，他们为此工具包付出了杰出的努力，为生成此插件提供了巨大帮助。