Home › Angular › Angular signals and standalone CLAUDE.md

Angular signals and standalone CLAUDE.md

CLAUDE.md for modern Angular apps: standalone components, signals, input()/output(), built-in control flow, inject(), zoneless-ready patterns, and tests.

Claude Code (CLAUDE.md)Angular

Copy CLAUDE.md

How to use

Save this as CLAUDE.md in your repository root, commit it, and your agent will pick it up automatically. Edit the commands to match your project.

Note: Review and test before use. Provided as is, without warranty. See Terms.

# CLAUDE.md: Angular app (signals era)

## Commands
`ng serve` · `ng build` · `ng test` · `ng lint` · generate with `ng generate component features/x/y` so files match project conventions. Check `@angular/core` in `package.json` and only use APIs that version marks stable.

## Conventions
- Standalone components, directives and pipes only (no new NgModules). Bootstrap with `bootstrapApplication` and providers in `app.config.ts`.
- `ChangeDetectionStrategy.OnPush` on every component; write code that would also work zoneless (signals or async pipe drive updates, no reliance on `setTimeout` triggering change detection).
- State with signals: `signal()`, `computed()`, `linkedSignal()` for derived-but-writable values; `effect()` only for side effects outside Angular (logging, storage, DOM APIs), never to copy one signal into another.
- Component API: `input()`, `input.required()`, `output()`, `model()` instead of `@Input`/`@Output` decorators in new code.
- Templates use built-in control flow: `@if`, `@for (item of items; track item.id)`, `@switch`, `@defer` for heavy below-the-fold content. No `*ngIf`/`*ngFor` in new code.
- DI with `inject()` in field initializers rather than constructor parameters.
- HTTP via `HttpClient` in services; convert to signals with `toSignal()` or use `resource()`/`httpResource()` if available in the project's version. Unsubscribe-free code: prefer `toSignal`, `async` pipe or `takeUntilDestroyed()`.
- Forms: typed reactive forms (`FormGroup<{...}>`, `nonNullable`), validators in the form definition.
- Routing: lazy load features with `loadComponent`/`loadChildren`; functional guards and resolvers.
- Styles scoped to components; global tokens in `styles.scss`.

## Tests
Component tests with `TestBed` (or the configured runner) using `fixture.componentRef.setInput()`; test services with `provideHttpClientTesting()`.

## Don't
Don't use `any`, manual `subscribe()` without cleanup, or direct DOM access via `ElementRef.nativeElement` when a binding works.