# Claude Code Angular: a practical guide for Angular developers

URL: https://agentvera.dev/en/blog/claude-code-for-angular/ · Published: 2026-11-01

Learn how to configure Claude Code for Angular projects, use signals, RxJS, and standalone components, run tests effectively, and avoid common pitfalls.

**In short:**

- Configure CLAUDE.md with Angular CLI commands, standalone component conventions, and signal/RxJS rules before starting Claude Code.
- Use plan mode, small diffs, and run tests and lint after each change to keep generated Angular code safe.
- Watch for missing standalone imports, overmixed signals and RxJS, and DI mistakes in agent output.

Claude Code ([Claude Code](/en/agents/claude-code/)) is a terminal coding agent you start in the project root with `claude`. On an Angular project, it can generate standalone components, services, signals, and RxJS code, but its output needs Angular-specific verification. This guide covers a practical setup with CLAUDE.md, a working loop, testing, and common pitfalls.

## Concrete advantages for Angular codebases

Angular projects reward conventions: standalone components, constructor injection, signals, RxJS streams, and CLI-generated test files. Claude Code can read the project tree, `angular.json`, `package.json`, and existing components before editing, so it can follow those conventions instead of producing generic JavaScript. Ask it to inspect a feature module or a service and it will usually identify the correct injection pattern, declarable imports, and testing setup. The value is greatest when CLAUDE.md narrows its choices: which folders contain what, when to prefer signals over RxJS, and which commands prove the change. A precise context turns it from a code generator into an Angular-aware pairing tool. For example, when asked to add a new standalone component, it can infer the import style from an existing component in the same folder and match naming patterns like `kebab-case` selectors and `PascalCase` classes.

## Configuring CLAUDE.md for Angular projects

Create or edit CLAUDE.md in the project root. Keep it short and concrete: build, test, and lint commands, folder conventions, and Angular-specific rules. Do not paste generated documentation; only include the commands and conventions that matter daily. A useful file looks like this:

```markdown
# CLAUDE.md

## Commands
- Install: npm ci
- Build: npm run build
- Test: npm run test -- --watch=false
- Lint: npm run lint
- Format check: npx prettier --check src

## Folders
- `src/app/core/` - singleton services, guards, interceptors
- `src/app/features/` - feature components and their private services
- `src/app/shared/` - reusable standalone components, pipes, directives
- `src/app/state/` - signals and RxJS state services

## Angular rules
- Use standalone components by default; do not create NgModules unless required.
- Prefer signals for local component state and computed values; use RxJS only for async streams and cancellation-aware work.
- Inject dependencies with `private readonly` constructor parameters.
- Keep components small; move business logic to services.
- Run tests and lint after each code change, then report any failures.
```

After writing CLAUDE.md, start `claude` in the same folder. Ask it first to summarize the project structure so you can confirm it read the conventions before making changes. Also mention which test runner the project uses (Jasmine or Jest) if that information is not already obvious from `package.json`.

## A verify-driven workflow for Angular tasks

Use [plan mode](/en/blog/claude-code-plan-mode/) before any non-trivial Angular change. A planning turn should name the files to create or edit, list the DI and change detection implications, and specify the tests to run. Keep each change small: one component or one service refactor at a time. After each change, ask Claude Code to run the project’s tests and lint, then review `git diff` yourself before proceeding. This avoids the biggest failure mode: a generated Angular component that compiles but breaks a template or test setup.

Example prompts:

- Add a standalone search input component using signals and RxJS debounce, keeping the typed value in a signal and emitting the debounced value to the parent.
- Refactor UserService from a BehaviorSubject-based store to signal state where appropriate, but keep the HTTP loading error as an RxJS observable.
- Write Jasmine specs for ProductListComponent for empty, populated, and error states using the existing TestBed setup.
- Diagnose the failing test in product-list.component.spec.ts. Run `npm run test -- --watch=false` first and do not modify production code until the cause is clear.
- Review this diff for Angular DI issues, missing standalone imports, and subscriptions that could leak in OnDestroy.

| Angular task | Good prompt |
| --- | --- |
| Standalone component | Create a standalone title bar component with @Input() title and a computed signal for the label. |
| Service with DI | Create a ProductApiService with HttpClient injected and a method that returns Observable<Product[]>. |
| Reactive state | Replace this BehaviorSubject with a signal, but keep the initial value lazy. |
| Test coverage | Add Jest tests for this signal-based counter service, covering increment, decrement, and reset. |

## Angular-specific capabilities and failure modes

Claude Code handles these well:

- generating standalone component, pipe, and directive files and updating the necessary imports;
- service scaffolding with `providedIn: 'root'` and constructor injection;
- converting a component from RxJS `BehaviorSubject` state to signals when the state model is simple;
- writing TestBed setups and specs for components and services.

Watch it closely for:

- missing standalone imports for pipes, directives, or child components; the Angular runtime error appears later, not in the generated file.
- mixing signals and RxJS unnecessarily. A component may end up with both a signal and a derived observable for the same state, making templates and lifecycle hooks harder to reason about.
- not defining `computed` with an equality function for object outputs, causing avoidable re-renders.
- ignoring `OnPush` change detection; generated components may not set `changeDetection: ChangeDetectionStrategy.OnPush`, which matters for performance-sensitive features.
- forgetting to clean RxJS subscriptions in `ngOnDestroy` or using the `async` pipe inconsistently.
- using Jasmine APIs when the project uses Jest, or vice versa; the agent may assume the wrong test runner from package.json. State the runner in CLAUDE.md and check generated specs.

A common failure during signal refactors is preserving old BehaviorSubject subscribers; the agent may leave both the old and new state APIs exposed on a service. Ask it to list every public property before and after a refactor and to delete unused subjects only after all templates and specs are updated.

## Testing strategies with Claude Code on Angular

Require verification at every step. Angular CLI commands are the source of truth: `npm run test -- --watch=false`, `npm run lint`, and `npm run build`. Do not accept an assertion that tests pass; ask Claude Code to run the command and paste the output. For continuous integration, [headless mode](/en/blog/claude-code-headless-mode/) can run the same verification without an interactive session.

For component changes, make the agent update the corresponding `.spec.ts` files. When tests fail, ask it to read the error trace from Angular’s test runner and fix only the test setup or component logic, not to silence tests. For signal and RxJS changes, verify that templates compile with `ng build` and that debounced or asynchronous behavior works under `fakeAsync` if appropriate. In projects using Jest, the `TestBed` configuration may differ; make sure the agent runs the test command exactly from CLAUDE.md and does not switch runners without an explicit instruction.

## Parallel agents with AgentVera for Angular

AgentVera is a desktop app that runs coding agents' real command line tools, including Claude Code, side by side in one window, each in its own real terminal panel. For Angular work, the most valuable features are parallel agents in separate git worktrees, so one agent can refactor a component tree while another writes tests without overwriting files; automatic code review that links findings to file:line, which catches missing standalone imports and DI mistakes early; checkpoints that let you undo a bad signal refactor; and token budgets that stop an agent before it burns budget on endless test loops. This fits Angular’s component and service boundaries well, but you still need one shared CLAUDE.md and a clear owner for each worktree.

## Final Angular workflow notes

Claude Code is most useful on Angular when you treat it as a junior Angular engineer with strong code generation and require careful review. Give it a precise CLAUDE.md, keep changes small, and make tests part of every turn. For parallel work or larger refactors, use separate worktrees and automated review to catch Angular-specific mistakes. With this loop, you can safely delegate components, services, signal conversions, and specs. Over time, update CLAUDE.md with any new conventions or failures you encounter, so the agent’s defaults align with your codebase. Also check the [Claude Code best practices checklist](/en/blog/claude-code-best-practices/) for additional configuration ideas.

## Frequently asked questions

**How do I start Claude Code in an Angular project?** Open a terminal in the project root and run claude. Add a CLAUDE.md file with Angular CLI commands, folder conventions, and test instructions so the agent follows your project context from the first prompt.

**Can Claude Code generate Angular components and services?** Yes, it can scaffold standalone components, services with dependency injection, spec files, and update imports. Review generated files because it may omit standalone imports or write inconsistent naming.

**Does Claude Code understand Angular signals and RxJS?** Yes, it can convert BehaviorSubject patterns to signals where appropriate, write computed and effect-based code, and create RxJS pipelines. State which style should be used per use case to avoid mixed state management.

**How do I get Claude Code to run Angular tests?** Ask it to run ng test --watch=false or your project’s test script after each change. You can also require ng lint and ng build in CLAUDE.md so verification becomes part of the working loop.

---

**About AgentVera.** AgentVera is a desktop app for macOS, Windows and Linux, built by Solviera Teknoloji. It runs 18 AI coding agents (Claude Code, Codex, Gemini CLI, Copilot, Cursor, Antigravity, opencode, Hermes, Qwen Code, Kimi Code, Kiro, Amp, Droid, Goose, Vibe, Crush, Aider, Cline) side by side, per project, in real terminals with the user's own CLI installs and logins. The free plan has unlimited agents. Download: https://agentvera.dev/en/download/ · Pricing: https://agentvera.dev/en/pricing/