Angular Development Recipes

Level 2 How-to Updated 2026-10-12

Angular development recipes for AI agents work when three things hold: the agent knows it is writing Angular 22 (zoneless, OnPush by default, Signal Forms stable), it can query the Angular CLI MCP server instead of guessing, and every change passes ng build, ng test on Vitest and a Playwright check.

This page is for developers who let Claude Code, Codex or Cursor write Angular code. The failure is familiar: the agent produces a component that compiles, the spec passes, and the view never updates, because the agent mutated a plain field the way Zone.js-era Angular allowed, and your app has no Zone.js to notice. Or it hands you BehaviorSubject services, *ngIf, @HostListener and a fakeAsync test that cannot run under Vitest.

What these Angular recipes give you

A one-command setup that gives the agent Angular’s own best-practice file and the Angular CLI MCP server
Ten copy-paste prompts for current Angular: components, services, Signal Forms, interceptors, routing, NgRx SignalStore, SSR, a zoneless migration, micro-frontends and directives
A table of the gates that sign an Angular change off without anyone reading every line
The Angular-specific ways agent code breaks, and how to recover from each

Which Angular 22 defaults do agents get wrong?

Agents were trained on a decade of NgModule, Zone.js and decorator-era code. The current APIs and defaults below contradict most of that training data:

Agent writes	What Angular 22 does	Write instead
A plain class field mutated in a handler, expecting the view to refresh	New CLI apps are zoneless (the application schematic’s `zoneless` option defaults to `true`), and `ChangeDetectionStrategy.OnPush` is the default strategy	A `signal()` or `computed()` read in the template
`changeDetection: ChangeDetectionStrategy.Default`	`Default` is deprecated in favour of `Eager`	Leave it out; add `Eager` only with a written reason
`provideExperimentalZonelessChangeDetection()`	Not exported by `@angular/core` 22.2.0	`provideZonelessChangeDetection()`, or nothing in a new app
`FormGroup` plumbing for a new form	Signal Forms (`@angular/forms/signals`: `form()`, `[formField]`) are public API since 22.0	Signal Forms; typed reactive forms for existing forms
`fakeAsync` and `tick()` in specs	`ng test` runs Vitest by default, and loads `zone.js/testing` only when the app’s polyfills include `zone.js`	Vitest fake timers (`vi.useFakeTimers()`) or `await fixture.whenStable()`
`provideClientHydration(withIncrementalHydration())`	Incremental hydration is on by default; `withIncrementalHydration()` is deprecated since 22.0	`provideClientHydration()`, plus `withEventReplay()` if you want it
`@HostListener`, `@HostBinding`, `ngClass`, `CommonModule`	Angular’s own AI instructions ban them for new code	The `host` object in the decorator, `class` and `style` bindings, per-directive imports

The next section puts these rules into the agent’s context so you do not have to repeat them in every prompt.

Give the agent Angular’s own context and MCP server

The Angular CLI ships two things written for coding agents. The ai-config schematic writes Angular’s best-practice instruction file and an MCP config for your tool. The ng mcp command runs the Angular CLI MCP server, whose default tools include get_best_practices, search_documentation, list_projects, run_target (build and test targets), dev-server start, stop and wait tools, and onpush_zoneless_migration.

Generate CLAUDE.md and a project .mcp.json from the repository root:

npx ng generate ai-config --tool=claude-code

If a CLAUDE.md already exists, the schematic (checked in @schematics/angular 22.2.0) leaves it untouched and prints a warning, while an existing .mcp.json gets the angular-cli server merged into its mcpServers. To take Angular’s guidance into your own file, move CLAUDE.md aside, run the command, and merge the two by hand. To add only the MCP server, at project scope so the team shares it:

claude mcp add --scope project angular-cli -- npx -y @angular/cli mcp

Generate AGENTS.md and .codex/config.toml:

npx ng generate ai-config --tool=open-ai-codex

Or add only the server to your user config:

codex mcp add angular-cli -- npx -y @angular/cli mcp

Codex reads project-level AGENTS.md only in trusted projects (since 0.150.0), so trust the workspace when Codex asks.

Generate AGENTS.md (Angular’s best-practice file) and .cursor/mcp.json:

npx ng generate ai-config --tool=cursor

Then open Cursor’s MCP settings, confirm angular-cli is listed and enabled, and copy the best-practice text from the generated AGENTS.md into a project Rule so every agent session loads it.

Add the project facts the schematic cannot know, below the generated block:

## This repository
- Angular 22.2, standalone only, zoneless. Tests: `npx ng test --watch=false` (Vitest). Lint: `npx ng lint`.
- State: signals in components; NgRx SignalStore (`@ngrx/signals` 22) for shared feature state.
- New forms use Signal Forms. Never add `zone.js`, `fakeAsync`, `@HostListener` or `CommonModule`.
- Before you finish: `npx ng build` and `npx ng test --watch=false` must both pass. Paste their last lines.

The ng build line matters most. The production build type-checks every template, so a wrong input name or a missing import fails there, not in review. For the reasoning behind project context files, see how to make a codebase agent-ready.

How to run a recipe in each tool

The prompts are tool-agnostic. What differs is how each tool runs the verification loop.

Paste the prompt into an interactive session, where auto mode is the starting permission mode from v2.1.283 (both release channels on 2026-10-12). To run a recipe headless in a script, allow only the commands it needs:

claude -p "$(cat prompts/angular-product-card.txt)" \
  --permission-mode acceptEdits \
  --allowedTools "Bash(npx ng build *)" "Bash(npx ng test *)"

Paste the prompt into the TUI, or run it non-interactively with write access limited to the workspace:

codex exec --sandbox workspace-write "$(cat prompts/angular-product-card.txt)"

For a long refactor such as the zoneless migration, codex cloud (experimental in 0.157.1) lets you browse a cloud task and apply its diff locally; codex apply applies the latest diff as a git apply.

Paste the prompt into the agent chat with the target folder and the relevant data-model or type file (for example src/app/models/product.ts) attached as context. For recipes that touch many files, such as routing or SSR, start in Plan Mode and approve the plan before any code is written. Review the diff in the editor, and keep the build and test commands in the prompt so the agent runs them in the terminal before it stops.

Build a standalone component with signals

Every prompt in this section names the file, the signal APIs and the proof you expect back. The 2025 file-name style (product-card.ts, not product-card.component.ts) is the CLI default in 22.x.

Create a standalone component at src/app/components/product-card/product-card.ts
(2025 file-name style, selector app-product-card). Match the existing Product type in src/app/models.

- Inputs with input(): product (required, Product), showActions (default true).
- Outputs with output(): addToCart emits Product, viewDetails emits the product id.
- computed(): isOnSale (discountPercentage > 0), finalPrice, formattedPrice via Intl.NumberFormat.
- Template: @if / @for / @switch only. Class and style bindings, no ngClass, no CommonModule.
- Do not set standalone or changeDetection in the decorator; the defaults are right.
- Spec with Vitest (no fakeAsync): render with fixture.componentRef.setInput(), assert the DOM
  for on-sale and regular products, and assert both outputs emit the right values.

Finish by running `npx ng build` and `npx ng test --watch=false`. Paste the last 10 lines of each.

What proves it: the spec drives inputs through setInput() and asserts rendered text, so it fails if the template reads a stale field. A spec that only calls component methods proves nothing about change detection.

Replace BehaviorSubject services with signals and httpResource

resource() and httpResource() are public API since 22.0, and the CLI’s own guidance prefers inject() and the @Service decorator for new singletons. Keep RxJS where you have real streams; move state to signals.

Refactor src/app/services/auth.service.ts from BehaviorSubject state to signals.

1. currentUser = signal<User | null>(null); isAuthenticated and role as computed().
2. login() and logout() keep HttpClient Observables for the calls, then set the signal.
   Expose only readonly signals (asReadonly()).
3. Load the profile with httpResource('/api/me') so loading and error states are signals too.
4. Keep toObservable(currentUser) as a temporary bridge for the three callers that still subscribe;
   list them in a TODO comment with file paths.
5. Use inject(), not constructor injection. Every remaining subscribe() uses takeUntilDestroyed().
6. Tests: login sets the user, logout clears it, a failed profile load leaves isAuthenticated false.
   Use HttpTestingController via provideHttpClientTesting().

Run `npx ng test --watch=false` and paste the result. Then grep the diff for "BehaviorSubject"
and "subscribe(" and explain every remaining hit.

Build a registration form with Signal Forms

Signal Forms replace FormGroup wiring with a signal model, a schema function and the [formField] directive. The validators you need (required, email, minLength, pattern, validate, validateAsync, validateHttp, applyWhen, hidden, disabled) are all exported from @angular/forms/signals in 22.2.0.

Build src/app/auth/register/register.ts with Signal Forms from @angular/forms/signals
(form(), schema functions, [formField] in the template). Do not use FormGroup or FormBuilder.

Model signal: email, password, confirmPassword, accountType ('personal' | 'business'), companyName.
Rules:
- email: required, email, and validateHttp against GET /api/users/exists?email=... (error "taken").
- password: required, minLength(12), pattern requiring upper, lower and digit.
- confirmPassword: validate() comparing with valueOf(password), error "mismatch".
- companyName: required and visible only when accountType is 'business' (applyWhen + hidden).
- Submit button disabled while the form is invalid or pending; submit() posts to /api/register.

Show errors from the field state, one message map for all fields.
Spec (Vitest, no fakeAsync): each rule fails and passes once, the async check hits the endpoint once
per settled value (use vi.useFakeTimers() for any debounce), and companyName toggles with accountType.
Run `npx ng test --watch=false` and paste the summary.

For an existing reactive form, do not ask for a rewrite in the same change. Ask for typed NonNullableFormBuilder fixes first, then migrate one form per pull request with its tests unchanged, so the tests become the oracle for the migration.

Chain functional HTTP interceptors

Create functional interceptors in src/app/core/http/ and register them in app.config.ts with
provideHttpClient(withInterceptors([...])).

1. authInterceptor: adds the bearer token from AuthService except for URLs in PUBLIC_ENDPOINTS.
2. refreshInterceptor: on 401, calls refresh once, retries the original request once, and logs out
   if refresh fails. Concurrent 401s share one refresh call.
3. errorInterceptor: maps 403 to /forbidden, 429 to a toast with the Retry-After value, 5xx to a
   generic toast. Never swallows the error; rethrows after handling.
4. timingInterceptor: logs method, URL and duration in dev mode only (isDevMode()).

Explain the order you chose in one comment above the array (request order, then response order).
Test each interceptor alone with provideHttpClientTesting(). Add one test where two requests get
401 at the same time and assert refresh is called exactly once.

The concurrent-401 test is the one that catches real bugs. Agents write a refresh that works for a single request and fires three refreshes when a dashboard loads three widgets.

Lazy-load routes with guards and resolvers

Move the admin section to lazy standalone routes.

1. src/app/admin/admin.routes.ts exports ADMIN_ROUTES with loadComponent for dashboard, users,
   settings and reports, under an AdminLayout component with a router-outlet.
2. In app.routes.ts: { path: 'admin', loadChildren: () => import('./admin/admin.routes')
   .then(m => m.ADMIN_ROUTES), canMatch: [adminGuard] }.
3. adminGuard is a functional CanMatchFn using inject(AuthService); unauthenticated users go to
   /login?returnUrl=..., authenticated non-admins to /forbidden (return a UrlTree, do not navigate).
4. userResolver is a ResolveFn<User> for users/:id; on 404 it returns a UrlTree to /admin/users.
5. Bind resolved data and params to component inputs: add withComponentInputBinding() to
   provideRouter if it is missing.

Tests: guard outcomes for the three user types, resolver success and 404.
Then run `npx ng build` and paste the "Lazy chunk files" section, which must list the admin chunks.

The last line turns “is it really lazy?” into evidence. If the admin components appear under initial chunks, the prompt failed, whatever the diff says.

Manage feature state with NgRx SignalStore

Create src/app/products/products.store.ts with signalStore() from @ngrx/signals 22.

- withState: products, selectedId, filters { query, category }, loading, error.
- withComputed: filteredProducts, selectedProduct, hasActiveFilters.
- withMethods: load(), select(id), setFilter(), clearFilters(), and remove(id) with an optimistic
  update that restores the previous array if the API call fails. Use patchState only.
- A search method built with rxMethod (from @ngrx/signals/rxjs-interop): debounceTime(300),
  distinctUntilChanged, switchMap to the API.
- withHooks onInit calls load(). Provide the store on the products route, not in root.

Tests with Vitest fake timers: filters recompute, the debounce sends one request for five
keystrokes, and a failed remove() restores the item. Run `npx ng test --watch=false`.

Add SSR with hydration

ng add @angular/ssr generates a server built on AngularNodeAppEngine and server routes with a RenderMode per path. Hydration comes from provideClientHydration(), which in 22.x already turns on incremental hydration and the HttpClient transfer cache; withEventReplay() is the option you add. withIncrementalHydration() is deprecated since 22.0, and the cache means responses fetched during server rendering are reused on the client, so do not ask the agent for hand-written TransferState code for plain HttpClient calls.

Add server-side rendering: run `npx ng add @angular/ssr`, then:

1. In app.routes.server.ts, prerender '' and 'about' (RenderMode.Prerender), render 'products/:id'
   on the server (RenderMode.Server), and render 'account/**' on the client (RenderMode.Client).
2. In app.config.ts use provideClientHydration(withEventReplay()). Incremental hydration and the
   HttpClient transfer cache are on by default; do not add withIncrementalHydration() or TransferState.
3. Audit every file under src/app for window, document, localStorage and navigator. Replace each
   with afterNextRender() or an injected BrowserStorage service that uses an in-memory Map on the
   server. List every file you changed and why.
4. Set Title and Meta for products/:id from the resolved product.

Verify: `npx ng build`, then start the server build and curl /products/1. Paste the <title> and
the first product heading from the HTML. Report any hydration warning from the browser console.

Migrate a legacy app to zoneless and OnPush

This is the recipe where the Angular CLI MCP server earns its place: its onpush_zoneless_migration tool analyses a file for Zone.js-dependent patterns and returns a migration plan the agent then applies. Run it one feature folder at a time.

Use the angular-cli MCP server. Migrate src/app/orders/ to zoneless-compatible, OnPush-safe code.

1. Call onpush_zoneless_migration on each component in the folder, and show me its plan first.
2. Apply the plan: state read by templates becomes signals; replace setTimeout-driven UI updates
   and manual ChangeDetectorRef calls; subscribe() calls use takeUntilDestroyed().
3. Migrate specs off fakeAsync/tick to Vitest fake timers or await fixture.whenStable().
4. Do not touch files outside src/app/orders/.

Before you change anything, run `npx ng test --watch=false` and record the pass count.
After the migration the same tests must pass with no assertion changed. If an assertion must
change, stop and explain why instead of editing it.

Freezing the assertions is what makes this safe to accept without reading every line: the existing tests are the specification, and the agent may not move them. See protect the test oracle for the general pattern, and legacy modernization for sequencing a larger migration.

Split a shell into micro-frontends with Native Federation

The CLI’s default application builder is esbuild-based. @angular-architects/module-federation targets webpack, so a current CLI app that keeps the default builder uses @angular-architects/native-federation instead, which delegates to the esbuild application builder.

Set up Native Federation for the shell app and a products remote with
@angular-architects/native-federation (ng add on each project). Keep the default esbuild builder.

1. The remote exposes its PRODUCTS_ROUTES (standalone routes), not a module.
2. The shell loads it with loadRemoteModule inside loadChildren, from a manifest file so the remote
   URL can change per environment without a rebuild.
3. Share @angular/* and rxjs as singletons with strict versions; list any other shared package and why.
4. If the remote fails to load, the route renders a fallback component instead of a blank page.

Verify: build both, serve both, and run a Playwright test that opens /products in the shell and
asserts the remote's heading. Stop the remote and assert the fallback renders.

Before you split, check that you need independent deployment. Micro-frontends trade build simplicity for team autonomy; microservices trade-offs apply to the frontend too.

Build directives with the host object

Create standalone directives and pipes in src/app/shared/. Use the host object in the decorator
for all listeners and bindings; never @HostListener or @HostBinding.

- clickOutside: output() fires on document clicks outside the host.
- inViewport: output() with IntersectionObserver, disconnected on destroy, no-op on the server.
- hasRole: structural directive, selector appHasRole (*appHasRole="'admin'"), that reads AuthService signals.
- relativeTime and fileSize pure pipes using Intl.RelativeTimeFormat and Intl.NumberFormat.

Test each with a small host component in the spec. Cover null, undefined, 0 and negative inputs for
the pipes, and destroy the host to prove the observer disconnects. Run `npx ng test --watch=false`.

How to verify agent-written Angular code without reading every line

Each gate answers one question, and together they replace a line-by-line read. The agent runs build and tests before it stops; CI runs all of them.

Gate	Command	What it proves
Build with template type-checking	`npx ng build`	Templates bind to real inputs and outputs, imports are complete, budgets hold (`angular.json` → `budgets`)
Unit and component tests	`npx ng test --watch=false`	Behaviour through the DOM, on Vitest, with no Zone.js crutch
Lint	`npx ng lint` after `npx ng add angular-eslint`	Angular-specific TypeScript and template rules, including the `template-accessibility` config
End-to-end	`npx playwright test`	Real routing, lazy chunks, hydration and forms in a browser. See end-to-end testing with agents and Playwright MCP
Accessibility	Axe checks inside the Playwright suite, after `npm i -D @axe-core/playwright` (4.13.0 on 2026-09-26)	WCAG AA, which Angular’s own AI instructions require. See accessibility testing

You still decide two things: that the acceptance criteria in the prompt are the right ones, and that no test assertion was weakened to get to green. A reviewer who reads the spec diff and the gate output, not the implementation diff, signs off. Bundle the outputs into the pull request as described in the evidence bundle.

When agent-written Angular code breaks

Symptom	Cause	Recovery
The view does not update after a click or an HTTP response	A plain field mutated in a zoneless, `OnPush` app	Ask the agent to move template state to signals. Do not add `zone.js` back to hide it
`fakeAsync` throws “zone-testing.js is needed for the fakeAsync() test helper”	Zone-era spec running under Vitest in a zoneless app	Rewrite the spec with `vi.useFakeTimers()` or `await fixture.whenStable()`
`ng build` fails with “is not a known element”, “Can’t bind to … since it isn’t a known property” or “No pipe found with name”	A component, pipe, or directive used through a property binding is missing from the standalone component’s `imports`	Make the agent run `ng build` before it stops and fix every error; this case cannot reach a green build
An attribute directive silently does nothing, with no build error	The directive is missing from `imports`, and the template uses it only as a plain attribute or an event binding such as `(clickOutside)`, which Angular compiles as an ordinary DOM attribute or listener	Require a spec that asserts the directive’s effect (for example, that the output fires), and check the `imports` array in the diff
Resolved data or route params arrive as `undefined` inputs	`withComponentInputBinding()` is missing from `provideRouter`	Add it once in `app.config.ts`
`ReferenceError: window is not defined` during SSR	Browser API read at construction time	Move the code into `afterNextRender()` or a platform-guarded service
The agent installs `@angular-architects/module-federation` in an esbuild app	Webpack-era training data	Switch to Native Federation, or keep webpack deliberately and say so in the context file
Memory grows on long sessions	`subscribe()` without `takeUntilDestroyed()`, or an observer never disconnected	Grep the diff for `subscribe(` and require a destroy test for each

When the agent keeps repeating the same wrong pattern, fix the context file, not the prompt: add the rule to the repository section of CLAUDE.md or AGENTS.md, or to your Cursor Rule, so the next session starts correct.

Where to go next with Angular and agents

Frontend recipes overview for the other frameworks
React development recipes to compare the same tasks in React
API development patterns for the backend your Angular app calls
Unit testing with agents for writing specs that fail for the right reasons
Acceptance criteria for agents for turning a ticket into the criteria these prompts end with

Did this guide help you?

One tap, no sign-in.

not at all a lot

Books · in the Toolkit Books · in your Toolkit 08 titles · EN + PL Included

Read the craft behind these recipes. Take the Handbook offline.

The AI Engineering Handbook binds the method and every workflow stage into one book, with Cursor, Claude Code and Codex side by side.

The AI Engineering Handbook binds the method and every workflow stage into one book, with Cursor, Claude Code and Codex side by side. It is in your Toolkit, and the file you download stays yours.

117 Chapters
1,523 Pages
EPUB·PDF Formats

See all eight books One of eight books in the Toolkit · $59.99 once

Download the book Browse all eight