angular-modernization

# Angular Modernization

Transforms legacy Angular components to modern architecture using a two-step approach:

1. **Automated migrations** - Angular CLI schematics for standalone, control flow, and signals
2. **Bitwarden patterns** - ADR compliance, OnPush change detection, proper visibility, thin components

## Workflow

### Step 1: Run Angular CLI Migrations

**⚠️ CRITICAL: ALWAYS use Angular CLI migrations when available. DO NOT manually migrate features that have CLI schematics.**

Angular provides automated schematics that handle edge cases, update tests, and ensure correctness. Manual migration should ONLY be used for patterns not covered by CLI tools.

**IMPORTANT:**

- Always run the commands using `npx ng`.
- All the commands must be run on directories and NOT files. Use the `--path` option to target directories.
- Run migrations in order (some depend on others)

#### 1. Standalone Components

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

NgModule-based → standalone architecture

#### 2. Control Flow Syntax

```bash
npx ng generate @angular/core:control-flow
```

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

#### 3. Signal Inputs

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

`@Input()` → signal inputs

#### 4. Signal Outputs

```bash
npx ng generate @angular/core:output-migration
```

`@Output()` → signal outputs

#### 5. Signal Queries

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

`@ViewChild`, `@ContentChild`, etc. → signal queries

#### 6. inject() Function

```bash
npx ng generate @angular/core:inject-migration
```

Constructor injection → `inject()` function

#### 7. Self-Closing Tag

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

Updates templates to self-closing syntax

#### 8. Unused Imports

```bash
npx ng generate @angular/core:unused-imports
```

Removes unused imports

### Step 2: Apply Bitwarden Patterns

See [migratio