DEV Community: Felipe Leon

Your Angular tech debt can now fix itself — ahc fix

Felipe Leon — Sat, 18 Jul 2026 17:41:04 +0000

Three weeks ago I launched Angular Health Check — a CLI that scores
your Angular project 0-100. It's at 1,200+ downloads now, and the #1
piece of feedback was brutally consistent:

"Cool, it found 23 issues. Now what?"

Fair. Detection without action is just guilt. So this release ships ahc fix.

Auto-fix


bash
$ ahc fix . --dry-run

  Would apply 12 fixes:
  ~ src/app/user-list.component.ts:8   Added OnPush to "UserListComponent"
  ~ src/app/cart.service.ts:45         Removed console.log('debug')

$ ahc fix .
  ✔ 12 fixes applied. Review with git diff, then re-run ahc scan.
What it fixes today — deliberately conservative:

Missing OnPush — inserts changeDetection: ChangeDetectionStrategy.OnPush plus the import. Real AST transform (ts-morph), not regex.
console.log — removed. console.warn/console.error stay (usually intentional), and console.log used as an expression value is never touched.
--dry-run first, always. And the CLI reminds you: OnPush changes
rendering behavior — review the diff before committing.

Rules that know your Angular version
The scanner reads @angular/core from your package.json and gates
rules accordingly:


Angular 14 detected — Signals rules skipped (requires Angular 16+)
No noise about input() migration on Angular 14. Rules light up as
your version unlocks them.

How far are you from modern Angular?

$ ahc migrate-check .

  Modernization readiness — Angular 18
  ✔ Standalone components      15/15
  ✔ Signal inputs              3/3
  ✔ Built-in control flow      11/11
  • OnPush change detection    13/15  → 2 components on default CD
Break the build when quality drops

- uses: piipe800/Angular-Health-Check/packages/action@main
  with:
    fail-under: 70
And PR comments now show the delta vs your base branch:
−5 pts vs base branch (was 92).

Try it
No install needed:


npx @angular-health-check/cli scan .
# or
pnpm dlx @angular-health-check/cli scan .
What should ahc fix handle next? trackBy? @Input() → input()
migration? The next fixer ships based on the comments.

I built a CLI that gives your Angular project a health score (0-100)

Felipe Leon — Fri, 10 Jul 2026 15:49:01 +0000

The problem

Every Angular codebase I've worked on had the same invisible issues:

Components without ChangeDetectionStrategy.OnPush
RxJS subscriptions that never unsubscribe
*ngFor without trackBy
Zero Signals adoption in Angular 17+ projects

These don't break your app immediately. They pile up silently until
performance tanks and nobody knows why.

What I built

Angular Health Check — a CLI that scans your project statically and
returns a normalized score from 0 to 100.


bash
npx @angular-health-check/cli scan .
Output:


✔ Scanned 47 files in 1.2s

Score: 74 / 100  ·  Good

Issues found:
  ✗ 3 errors    → OnPush missing (HomeComponent, UserListComponent, CardComponent)
  ⚠ 7 warnings  → RxJS: subscribe without takeUntil/async pipe (5 files)
  ℹ 4 infos     → ngFor without trackBy
The score is normalized by project size — a 5-file project and a
500-file project are scored on the same scale.

Detection rules
Rule    Severity
Missing OnPush  Error
RxJS leak (no unsubscribe)  Warning
ngFor without trackBy   Info
No Signals adoption (Angular 17+)   Warning
Performance anti-patterns   Warning
The dashboard
Every scan auto-syncs to angularhc.dev:

Score history chart over time
Scan-to-scan diff comparison
GitHub PR integration (auto-comment on every PR with the score)
Team dashboard sharing
First you authenticate the CLI:


ahc login
Then every ahc scan . pushes results to your dashboard automatically.

GitHub PR integration
With the Pro plan, every pull request gets an automatic comment:


Angular Health Check · Score: 81/100 (+7 vs main)
✔ OnPush: all components
⚠ 2 RxJS warnings in auth.service.ts
Install

npm install -g @angular-health-check/cli
ahc login
ahc scan .
Free plan includes 20 stored scans. Pro is $9/mo for unlimited scans,
full history, and GitHub integration.

→ angularhc.dev
→ npm: @angular-health-check/cli

What's your Angular project's score? Drop it in the comments.

I Built a Utility Library for Angular Signals, here's What I Learned

Felipe Leon — Tue, 28 Apr 2026 14:01:34 +0000

Angular Signals landed in Angular 16 and became stable in Angular 17. They're reactive, they're fast, and they make state management feel simple again.

But after using them for a while, I kept writing the same boilerplate over and over.

// Every. Single. Time.
const filtered = computed(() => items().filter(x => x.active));
const mapped   = computed(() => items().map(x => ({ ...x, label: x.name.toUpperCase() })));
const total    = computed(() => items().reduce((sum, x) => sum + x.price, 0));

And don't even get me started on persisting a signal to localStorage:

// Without a helper — just to persist one value
const saved = localStorage.getItem('theme');
const theme = signal(saved ? JSON.parse(saved) : 'light');

constructor() {
  effect(() => {
    localStorage.setItem('theme', JSON.stringify(theme()));
  });
}

That's 7 lines for something that should be one.

So I built @signals-toolkit/core — a collection of utilities that covers the most common Angular Signals patterns. Here's the story.

What's inside

The library ships 14 helpers across 5 categories:

Category	Helpers
Computed	`computedMap`, `computedFilter`, `computedReduce`
Storage	`signalStorage`
RxJS Bridge	`signalFromObservable`, `toObservable`
Rate Limiting	`debounceSignal`, `throttleSignal`, `distinctUntilChanged`
Advanced	`watchSignal`, `computedAsync`, `signalProfiler`, `signalGroup`, `persistedComputed`

Let me walk through the ones I use most.

signalStorage — the one I use in every project

This one replaces the localStorage boilerplate completely.

Before:

const saved = localStorage.getItem('theme');
const theme = signal(saved ? JSON.parse(saved) : 'light');

constructor() {
  effect(() => {
    localStorage.setItem('theme', JSON.stringify(theme()));
  });
}

After:

import { signalStorage } from '@signals-toolkit/core';

const theme = signalStorage('theme', 'light');

Same behavior. One line. It restores the saved value on init, syncs on every .set() and .update(), and works exactly like a normal WritableSignal.

theme.set('dark');    // saved to localStorage immediately
theme.update(t => t === 'dark' ? 'light' : 'dark'); // works too
theme.asReadonly();   // also works

computedMap, computedFilter, computedReduce

These three replace the most common computed(() => source().map/filter/reduce(...)) patterns.

import { computedMap, computedFilter, computedReduce } from '@signals-toolkit/core';

const products = signal([
  { name: 'Keyboard', price: 120, inStock: true  },
  { name: 'Monitor',  price: 350, inStock: false },
  { name: 'Mouse',    price: 45,  inStock: true  },
]);

// Transform
const withTax = computedMap(products, p => ({ ...p, total: p.price * 1.19 }));

// Filter
const available = computedFilter(products, p => p.inStock);

// Aggregate
const subtotal = computedReduce(products, (sum, p) => sum + p.price, 0);

console.log(available()); // [Keyboard, Mouse]
console.log(subtotal());  // 515

The syntax is intentional — you read it left to right: "filter products where inStock is true". Much clearer than a nested computed(() => products().filter(...)).

debounceSignal — saved my search feature

Before this, every search input required a manual timer:

// The old way
let timer: ReturnType<typeof setTimeout> | null = null;

onInput(value: string) {
  if (timer) clearTimeout(timer);
  timer = setTimeout(() => {
    searchSignal.set(value);
    timer = null;
  }, 500);
}

Now:

import { debounceSignal } from '@signals-toolkit/core';

const search = debounceSignal('', 500);

// In the template:
// <input (input)="search.set($event.target.value)" />

effect(() => {
  this.fetchResults(search()); // fires 500ms after the user stops typing
});

The signal handles the timer internally. No cleanup, no clearTimeout, no extra variables.

It also supports leading and trailing options for edge cases:

// Fire immediately on first keystroke, then silence for 300ms
const search = debounceSignal('', { delay: 300, leading: true, trailing: false });

signalFromObservable — the RxJS bridge I needed

We're not all rewriting RxJS apps overnight. This bridges the gap:

import { signalFromObservable } from '@signals-toolkit/core';

const { value, loading, error, destroy } = signalFromObservable(
  this.http.get<User[]>('/api/users'),
  [] // initial value while loading
);

You get three signals automatically: the data, loading state, and any error. Use them directly in the template:

@if (loading()) {
  <app-spinner />
} @else if (error()) {
  <app-error [message]="error()!.message" />
} @else {
  <app-user-list [users]="value()" />
}

Call destroy() in ngOnDestroy to unsubscribe cleanly.

computedAsync — reactive fetch with no race conditions

This one handles the hardest part of async data: what happens when the source changes while a request is still in flight.

import { signal, inject, Injector } from '@angular/core';
import { computedAsync } from '@signals-toolkit/core';

const userId = signal(1);
const injector = inject(Injector);

const { value, loading, error } = computedAsync(
  userId,
  (id, abortSignal) =>
    fetch(`/api/users/${id}`, { abortSignal }).then(r => r.json()),
  { initialValue: null, injector }
);

When userId changes:

The previous fetch is aborted via AbortController
loading() becomes true
The new fetch runs
value() updates when it resolves

No manual request ID tracking. No stale data. Works with any fetch call out of the box.

signalGroup — a mini store without the boilerplate

Need to group related signals? Instead of declaring them one by one:

// Before
const name  = signal('');
const email = signal('');
const role  = signal<'admin' | 'editor'>('editor');
// ...then manually reset each one

// After
import { signalGroup } from '@signals-toolkit/core';

const form = signalGroup({
  name:  '',
  email: '',
  role:  'editor' as 'admin' | 'editor',
});

// Each key is a full WritableSignal
form.name.set('Felipe');
form.email.set('felipe@example.com');

// Utilities included
form.patch({ role: 'admin' });          // update specific fields
form.snapshot();                         // { name, email, role } as plain object
form.reset();                            // back to initial values

It's not a full state management solution — it's just the pattern you'd write anyway, with snapshot, reset, and patch already wired up.

The numbers

14 helpers total
80 unit tests, 0 TypeScript errors
8.8KB on npm (zero bundled dependencies — Angular and RxJS are peer deps)
Targets Angular 16+

Install

npm install @signals-toolkit/core

Then import whatever you need:

import {
  signalStorage,
  computedMap,
  debounceSignal,
  computedAsync,
  signalGroup,
} from '@signals-toolkit/core';

What's next

FASE 2 is already planned:

More computedAsync options (retry, polling)
signalHistory — undo/redo support for any signal
signalBus — typed event bus built on signals

If you try the library and find something missing or broken, open an issue. Contributions are welcome.

What patterns are you seeing repeat across your Angular Signals code? I'd love to know what helpers would actually be useful.