What an Angular-native Storybook alternative actually looks like

说明与用途

ng-prism 通过直接注释组件，生成无 iframe、无第二构建系统的样式指南，并从 JSDoc 自动生成文档，替代 Storybook。

问题

Angular component libraries rely on Storybook, which adds a parallel file tree, a second build toolchain, iframe isolation, and a flat args abstraction that clashes with Angular signals.

结果

ng-prism replaces Storybook with a single‑file annotation approach, eliminating iframe isolation, reducing build complexity, and auto‑generating documentation from source JSDoc.

工作流

• 1. Annotate a component with @Showcase, optionally typing the component.
• 2. Add variants, inputs, outputs, and metadata in the decorator.
• 3. Run ng add @ng-prism/core to install and wire builders into angular.json.
• 4. Start the dev server with ng run my-lib:prism (port 4400).
• 5. Build a static styleguide with ng run my-lib:prism-build for CI or Pages.
• 6. Use the generated UI: controls auto‑populate from signal inputs, events log in the Events tab, and API docs derive from JSDoc comments.

证据

ng-prism puts the showcase config on the component, extracts the rest with the TypeScript compiler, and renders into your document instead of an iframe.

来源

Setup is one command, and it wires ng-prism's builders into your existing angular.json

来源