Angular Component Library

Angular Component Library

Building an Angular component library from scratch is a repetitive, error-prone process. Developers face the same challenges every time: - Manually creating the correct directory structure (src/lib, src/assets, src/test, config) - Writing boilerplate for components, services, directives, pipes, and modules - Configuring ng-packagr correctly for Angular Package Format (APF) compliance - Setting up TypeScript strict mode with proper angularCompilerOptions - Ensuring tree-shakable providers with the lightweight injection token pattern - Writing tests that follow Angular testing conventions - Validating that the built output meets APF requirements before publishing Each of these steps takes 15-30 minutes when done manually. A full library setup can consume 2-3 hours of boilerplate work before any actual component logic is written. Worse, common mistakes like missing sideEffects: false in package.json, incorrect flatModuleOutFile configuration, or forgetting to export from public-api.ts cause silent build failures that waste additional debugging time. This skill eliminates all of that. It scaffolds a complete, production-ready Angular library in under a second, validates the build output against APF standards, and provides commands to add new components, services, pipes, and directives as the library grows.

What It Does

• Scaffolds a complete Angular library project with correct directory structure and all required configuration files
• Generates standalone components with OnPush change detection and proper input/output decorators
• Creates tree-shakable services using the providedIn: root pattern
• Builds directives with host listener bindings and configurable inputs
• Generates pipes with type-safe transform methods
• Produces TypeScript model interfaces and type definitions
• Writes NgModule wrappers for backward compatibility with module-based Angular apps
• Generates unit tests following Angular TestBed conventions
• Validates built library output against Angular Package Format (APF) requirements
• Analyzes bundle size and reports file-level metrics
• Initializes a full Angular workspace with a library project using Angular CLI
• Supports adding new components, services, pipes, and directives to existing libraries

Use Cases

• Starting a new Angular component library: A developer needs to create a shared UI component library for a multi-app Angular workspace. Instead of manually creating the directory structure and configuration files, they run the scaffold command and get a complete, APF-compliant library in under a second.
• Adding components to an existing library: A team maintains a growing component library and needs to add a new button component. They run add-component with the correct prefix and get a standalone component with OnPush change detection, proper inputs/outputs, and a matching test file.
• Validating a library before npm publish: Before publishing a library update to npm, a developer runs the validate command to ensure the build output meets APF requirements. The validation catches missing source maps, incorrect package.json fields, or missing FESM bundles before they cause issues for consumers.
• Auditing library bundle size: A performance-conscious team monitors their library's bundle size across releases. They run the analyze command after each build to track JS bundle size, TypeScript declaration size, and identify the largest files for optimization.
• Setting up a monorepo with shared libraries: An organization adopts an Angular monorepo structure with multiple applications sharing common libraries. They use init-workspace to create the workspace structure, then scaffold to generate each library with consistent conventions.
• Migrating from NgModules to standalone components: A team modernizing an Angular 14 codebase to Angular 18 needs to create new standalone components while maintaining backward compatibility. The scaffold command generates both standalone components and NgModule wrappers, supporting incremental migration.