angular-modernization

Name: angular-modernization
Availability: InStock
Author: Bitwarden

Modernize legacy Angular components to standalone architecture with CLI migrations.

13.6k|2.0k|Updated Mar 9, 2016

Search Tags:#angular #migration #signals #angular-cli #standalone-components #code-modernization

Ready to run

npx skills add https://github.com/bitwarden/clients --skill angular-modernization

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: angular-modernization
Source: https://github.com/bitwarden/clients/tree/main/.claude/skills/angular-modernization
Command: npx skills add https://github.com/bitwarden/clients --skill angular-modernization

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates modernizing Angular code such as components and directives to follow best practices using both automatic CLI migrations and Bitwarden-specific patterns. YOU must use this skill when someone requests modernizing Angular code. DO NOT invoke for general Angular discussions unrelated to modernization.

Core Features & Use Cases

Automated Migrations: Use Angular CLI schematics for standalone components, control flow, and signals.
Bitwarden Patterns: Apply ADR-compliant architecture, OnPush change detection, appropriate visibility, and service extraction.
Guided Migration: Ensures migrations are run in the correct order and with proper tooling.

Quick Start

Run the angular modernization workflow on a target directory (for example, src/app/admin) to convert to standalone components and apply Bitwarden modernization patterns.

Frequently Asked Questions about angular-modernization

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I modernize legacy Angular components to standalone architecture?▼

Modernizing Angular components to standalone architecture involves running Angular CLI migrations via npx to convert components, apply control-flow syntax, and adopt signal inputs/outputs. The process automates conversion while ensuring Bitwarden ADR-aligned patterns, OnPush change detection, and proper visibility modifiers are applied throughout your codebase.

What Angular CLI migrations are needed for component modernization?▼

Angular CLI migrations automate the transition from legacy components to standalone components and modern control flow. Key migrations convert NgIf/NgFor to new syntax, introduce signals for state management, and apply OnPush change detection. Run migrations in sequence using npx to ensure correct ordering and compatibility across your Angular project.

Can I automate the conversion of Angular directives and components to follow best practices?▼

Yes, Angular CLI schematics automate conversion of directives and components to best practices including standalone architecture, signal inputs/outputs, and Bitwarden-specific patterns. The process applies visibility modifiers, extracts services, and ensures OnPush change detection—reducing manual refactoring and maintaining consistency across your codebase.

Do I need to manually refactor each Angular component, or can migrations handle the modernization?▼

Angular CLI migrations handle the bulk of modernization automatically, converting components to standalone, applying control-flow syntax, and introducing signals. However, you must guide the process, run migrations in correct order via npx, and validate that ADR-aligned patterns and service extraction align with your architecture before deployment.

What's the best way to ensure Angular components follow Bitwarden patterns during modernization?▼

Bitwarden modernization patterns enforce ADR-compliant architecture, OnPush change detection, appropriate visibility modifiers, and signal-based state management. The modernization workflow applies these patterns systematically during CLI migrations, ensuring consistency and adherence to organizational standards across your Angular codebase without manual pattern enforcement.

What are the prerequisites before running Angular modernization migrations?▼

Ensure your Angular project uses a compatible CLI version and targets directories containing legacy components requiring migration. You'll need npx access to run Angular CLI schematics and a working understanding of your codebase structure. Back up your code and review migration output, as the process converts existing architecture to standalone components with signals and modern syntax.