Angular Modernization

npx ng generate @angular/core:standalone --path=<directory> --mode=convert-to-standalone

NgModule-based → standalone architecture

2. Control Flow Syntax

npx ng generate @angular/core:control-flow

*ngIf, *ngFor, *ngSwitch → @if, @for, @switch

3. Signal Inputs

npx ng generate @angular/core:signal-input-migration

@Input() → signal inputs

4. Signal Outputs

npx ng generate @angular/core:output-migration

@Output() → signal outputs

5. Signal Queries

npx ng generate @angular/core:signal-queries-migration

@ViewChild, @ContentChild, etc. → signal queries

6. inject() Function

npx ng generate @angular/core:inject-migration

Constructor injection → inject() function

7. Self-Closing Tag

npx ng generate @angular/core:self-closing-tag

Updates templates to self-closing syntax

8. Unused Imports

npx ng generate @angular/core:unused-imports

Removes unused imports

Step 2: Apply Bitwarden Patterns

See migration-patterns.md for detailed examples.

1. Add OnPush change detection
2. Apply visibility modifiers (protected for template access, private for internal)
3. Convert local component state to signals
4. Keep service observables (don't convert to signals)
5. Extract business logic to services
6. Organize class members correctly
7. Update tests for standalone

Step 3: Validate

• Fix linting and formatting using npm run lint:fix
• Run tests using npm run test

If any errors occur, fix them accordingly.

Key Decisions

Signals vs Observables

• Signals - Component-local state only (ADR-0027)
• Observables - Service state and cross-component communication (ADR-0003)
• Use toSignal() to bridge observables into signal-based components

Visibility

• protected - Template-accessible members
• private - Internal implementation

Other Rules

• Always add OnPush change detection
• No TypeScript enums (use const objects with type aliases per ADR-0025)
• No code regions (refactor instead)
• Thin components (business logic in services)

Validation Checklist

Before completing migration:

• OnPush change detection added
• Visibility modifiers applied (protected/private)
• Signals for component state, observables for service state
• Class members organized (see migration-patterns.md)
• Tests updated and passing
• No new TypeScript enums
• No code regions

References

Bitwarden ADRs

• ADR-0003: Observable Data Services
• ADR-0025: No TypeScript Enums
• ADR-0027: Angular Signals
• Bitwarden Angular Style Guide

Angular Resources

• Angular Style Guide
• Angular Migrations
• Angular CLI Schematics