I built an Angular component library on signals — the decisions, the numbers, and the bugs behind it

说明与用途

基于 Angular 信号、无 zone.js 的轻量级可访问组件库，CI 强制执行 WCAG 2.1 AA，并通过 CSS 自定义属性实现主题化。

问题

Angular developers need a lightweight, accessibility‑centric component library that leverages the latest Angular primitives without the overhead of zone.js and NgModules.

结果

The library delivers a small, performant, and accessible component set that runs without zone.js, supports Angular 20‑22, and enforces WCAG 2.1 AA via CI.

工作流

• 1. Design components using Angular signals (input, output, model, computed).
• 2. Implement components as standalone, OnPush, without NgModules or zone.js.
• 3. Enforce accessibility via CI (axe‑core) and WCAG 2.1 AA checks.
• 4. Provide theming through CSS custom properties and 9 prebuilt themes.
• 5. Publish the library to npm and test on Angular 20‑22 by building fresh apps.
• 6. Document components with live demos and enforce CI checks for axe violations.

证据

Signals-first APIs, zero zone.js · a full component catalog, from buttons to a virtual-scroll table and a command palette · themed entirely through CSS custom properties (9 prebuilt themes, one variable re-skins everything) · WCAG 2.1 AA enforced by CI — a single axe-core violation fails the PR · ~102 kB gzipped for the whole tree-shaken library, ~4 kB for a button · runs on Angular 20, 21 and 22

来源

Lesson 1: in a zoneless app, microtasks don't wait for your template

来源